jquery - fadeOut / fadeIn Hintergrundbild bei Hover

8

Ich habe ein <div> , das ein Hintergrundbild enthält, das <div> befindet sich innerhalb einer Werkzeugleiste in HTML.

HTML:

%Vor%

CSS:

%Vor%

Wenn der Mauszeiger über #toolbar steht, möchte ich, dass sich das Hintergrundbild von .image ändert, aber mit .fadeOut() und .fadeIn()

Bisher habe ich:

%Vor%

Derzeit wird das Logo ausgeblendet und das Hover-Logo wird zweimal eingeblendet.

Jede Hilfe wird geschätzt.

    
CLiown 09.03.2010, 11:57
quelle

3 Antworten

4
%Vor%     
Amgad Fahmi 09.03.2010, 12:03
quelle
6

Es gibt keine Möglichkeit, fließende Übergänge zwischen Bildern in jQuery zu machen - es kann nicht zwischen den Bildern wechseln. Sie können Farbübergänge mit einem Plugin machen.

Sie können etwas mit CSS-Übergängen tun. Sie können Übergänge nur für Werte verwenden, die in CSS festgelegt wurden, und sie sind noch nicht in allen Browsern enthalten:

%Vor%

Dies hat einen schönen Fade-Effekt bei mouseover, die Änderung der Deckkraft wird immer noch im IE passieren, aber ohne den Fade-Übergang.

Eine andere Möglichkeit ist, die Bilder ein- und auszublenden - Sie können dies mit jQuery-Hover-Ereignissen oder CSS tun, aber in jedem Fall müssen die Bilder absolut übereinander positioniert sein.

    
Keith 09.03.2010 12:25
quelle
1

Da Sie ein Hintergrundbild nicht ausblenden können, können Sie switchClass() ausprobieren, das Sie auf einen Timer setzen können. Ich bin mir nicht sicher, ob du ein reines Ausblenden und Einblenden erhalten würdest, aber du könntest einen coolen Morph-Effekt erhalten.

Es wäre also ungefähr so:

%Vor%     
Anthony 09.03.2010 12:11
quelle

Tags und Links