jquery - fadeOut/fadeIn Hintergrundbild auf Hover

Question

Ich habe eine <div>, die ein Hintergrundbild enthält, die <div> sitzt in einer Symbolleiste in HTML.

HTML:

<div id="toolbar"> 
    <div class="image">&nbsp;</div> 
</div> 

CSS:

#toolbar .image { 
background url('images/logo.png') no-repeat top left; 
} 

#toolbar .imagehover { 
background url('images/logoHover.png') no-repeat top left; 
} 

Wenn die Maus über #toolbar schwebt möchte ich das Hintergrundbild von .image aber .fadeOut() und .fadeIn()

I Bisher verwenden ändern :

$("#toolbar").hover(function() { 
    $(".image").fadeOut("slow"); 
    $(".image").addClass("imagehover"); 
    $(".imagehover").fadeIn("slow"); 
    }, 
    function() { 
    $(this).removeClass("imagehover"); 
}); 

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

Jede Hilfe wird geschätzt.

Answer 1

//Use the fad in out callback 
$("#toolbar").hover(function() { 
    $(".image").fadeOut("slow", function() { 
     $(this).addClass("imagehover").fadeIn("slow", function() { 
      $(this).removeClass("imagehover"); 
     }); 
    }); 

}); 

//or you can use animate 
$("#toolbar").animate({ 
    "class": "imagehover" 
}, "slow", 'easein', function() { 
    //do what every you want 
}); 

Answer 2

Da Sie ein Hintergrundbild nicht ausblenden können, können Sie switchClass() versuchen, die Sie auf einen Timer einstellen können. Ich bin mir nicht sicher, ob Sie ein reines Ausblenden und Einblenden erhalten, aber Sie könnten einen coolen Morph-Effekt erhalten.

So wäre es etwa so aussehen:

$("#toolbar img:hover").switchClass("image","imagehover", "slow"); 

Answer 3

Es gibt keine Möglichkeit, fließende Übergänge zwischen den Bildern in jQuery zu tun - es nicht weiß, wie zwischen einem Bild und dem nächsten zu übersetzen. Sie können Farbübergänge mit einem Plugin machen.

Sie können etwas mit CSS-Übergängen tun. Sie können nur auf Werten in CSS gesetzt Übergänge verwenden, und sie sind nicht in allen Browsern noch:

/* faded out logo class */ 
.faded-logo { 
    opacity: 0.30;     /* FX, Safari, GC, Opera, decent browsers */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */ 
    filter: alpha(opacity=30);           /* IE */ 

    background: url('images/logo.png') no-repeat top left; 

    /* in Safari, FX and Chrome add a fade transition */ 
    -webkit-transition: opacity .25s linear .1s; 
    transition: opacity .25s linear .1s; 
} 

/* no opacity on hover */ 
.faded-logo:hover { 
    opacity: 1;      /* FX, Safari, GC, Opera, decent browsers */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */ 
    filter: alpha(opacity=100);           /* IE */ 
} 

dies einen ziemlich Fade-Effekt mit der Maus darüber haben wird, wird die Änderung in der Opazität noch in IE passieren, aber ohne der Übergangsübergang.

Eine weitere Option ist das Ein- und Ausblenden der Bilder - Sie können dies mit jQuery Hover-Ereignissen oder CSS tun, aber in jedem Fall müssen die Bilder absolut übereinander positioniert werden .