jQuery Hover Bildwechsel Animation

Question

Ich habe ein IMG-Tag mit einem Graustufenbild. Ich habe ein Hover() -Ereignis angeschlossen, um die "src" bei Hover in ein Farbbild und bei Mouse-out wieder in Graustufen zu ändern.

Dies funktioniert gut, aber die Änderung ist abrupt. Ich möchte dem Effekt einen leichten fadeIn() hinzufügen, damit die Farbe ein- und auszublenden scheint. Ich schrieb folgendes, von dem ich dachte, dass es funktionieren würde, aber nicht. (Das Bild ändert sich, aber es gibt keine Fade oder Verzögerung für den Effekt). Was mache ich falsch?

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

Hier sind ein paar Lösungen. Ihr Code funktioniert nicht, weil Sie die Quelle festlegen, die das Bild sofort ändert.Es ist wahrscheinlich einfacher, einfach beide Bilder zu laden, sie mit CSS zu überlagern und die Farbe dann auszublenden, wenn der Elterncontainer überflogen wird. Alternativ können Sie überqueren verblassen sie

css

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

html

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

verblassen in der Maus darüber

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

Quer fad e

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

tatsächlich versucht, in dem dieses Element zu verblassen langsam, und ‚dies‘ bezieht sich auf

$("#showForm") 

Stattdessen, wenn Sie möchten, dass Sie das Farbbild direkt über dem aktuellen Graustufen setzen könnte Bild, und markieren Sie das Farbbild ausgeblendet, dann lassen Sie es langsam verblassen. Angenommen, sie sind übereinander positioniert, könnten Sie tun:

);

die HTML Annahme ist so etwas wie (wo sameAbsolutePosition ist css sie in exakt der gleichen Stelle zu setzen, so vielleicht so etwas wie position: absolute; left: 20; top: 20px;):

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

zu wiederholen Sie, Sie werden ein neues Bild über einem anderen Bild verblassen. Sie können das Graustufenbild auch gleichzeitig ausblenden.

Answer 3

Wo verblassen Sie? Fade in tut display:block mit Opazität von 0 bis 100. Fade Auswechseln tut display:none mit Opazität von 100 auf 0

Wechsel Einmal Sie fadeIn, ist das Bild display:block und Opazität ist 100. Also, Sie nicht eine Animation sehen . So entweder eine Anzeige: keine oder FadeOut vor FadeIn wieder.

Gegeben ist Beispiel mit erklärt Dinge. Sie sollten es entsprechend Ihren Anforderungen ändern.

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

viel bessere Lösung:

über Javascript vergessen, diese Arbeit zu tun. Verwenden Sie stattdessen CSS sprites. Wenn Sie auf fadeIn, fadeOut bestehen, verwenden Sie Übergänge.

AKTUALISIEREN: Auf die folgenden Kommentare kann ich keinen Code schreiben, da ich Dimensionen und Positionen in Todds Sprite nicht voraussehen kann. Ich möchte auch klarstellen, dass mein Vorschlag ist, Sprites und dann Übergänge zu verwenden, um "Funktionalität" und nicht nur Übergänge zu verbessern, weil ich annehme, dass er dies benötigt, um in IE8 und IE9 zu arbeiten.

Answer 5

Versuchen mit diesem

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

Hier Fiddle

Answer 6

Sie könnten diese Überblendungs ​​mit css3 tun zu verwenden Übergang. nicht für alle Browser verfügbar, aber immer noch ... http://www.w3schools.com/css3/css3_transitions.asp

In ähnlicher Weise CSS: image link, change on hover

Zum Beispiel:

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}