jQuery: Überblenden Bild auf schweben

Question

Ich versuche, ein ‚Fade in‘ Skript zu implementieren, die zwei Bilder beeinflussen würde:

<script type="text/javascript"> 

    $(document).ready(function(){ 

     $('img').mouseover(function() { 

       $(this).fadeOut(200, function() { 

        $(this).attr({'src':'http://example/images/image.png'}); 

       if (this.complete) $(this).fadeIn(500); 

       }); 
     }); 

    }); 

</script> 

Dieses Bit von jQuery gibt mir folgendes:

1 - erste das Bild verblasst und verschwindet 2 - dann, aus einem leeren Raum, entsteht der neue.

Also ich möchte das Skript verbessern, um einen echten "Einblenden" Effekt zu bekommen.

Es gibt zwei große Ressourcen, die ich jetzt zu erforschen wurde:

• Cycle Plugin - sehr cool (ich versuche, diesen Zyklus Effekt auf schweben zu bekommen)
• JQuery for Designers cool, aber ich hatte ein paar Probleme mit IE (eine seltsame schwarze pixelierte Grenze auf dem FadeIn).

Vielen Dank, wenn jemand auf eine eventuelle zusätzliche Lösung hinweisen kann.

Jan

EDIT: CSS Trick/Lösung hier http://paragraphe.org/stackoverflowdemos/crossfade-images/

Answer 1

In letzter Zeit ich eine CSS konzentrierte Lösung gefunden: absolut ein Bild Positionierung „über“ eine andere, Fading auf 0 mit jQuery auf Dokument bereit, und bei MouseOver vollständig aufblenden/bei MouseOut wieder auf 0 ausblenden.

Answer 2

Die Art und Weise Sie die zweite Fade anrufen, als Rückruf auf die ursprüngliche verblassen garantiert sie einer nach dem anderen ausgeführt werden.

könnte mehr Glück mit diesem

$('img').mouseover(function() { 
      $(this).fadeOut(200); 
      $(this).attr({'src':'http://example/images/image.png'}); 
      if (this.complete) $(this).fadeIn(500); 
     }); 

Auch wenn Sie noch an der Laune der Ladezeit des zweiten Bildes sein wird, wenn es irgendwo vorbelastet wird.

Answer 3

Dies ist eine Art langwieriger Fix, aber es ist, was ich mache, um glatte Überblendungen zu bekommen. Ich verwende das Fadeout, dann benutze ich als Callback $ .ajax, um ein neues Bild zu laden, dann benutze ich die success: -Funktion, um das div (oder img) hinzuzufügen, und benutze dann die complete: -Funktion, um es zu verblassen in. Dies führt zu einer glatten Ausblendung - neuer Inhalt - Ausbleichen. Hier

ist ein Beispiel einer PHP-Datei geladen wird, das Prinzip ist das gleiche mit einem Bild:

$("#leftbar").fadeOut("normal", function() { 
$.ajax({ 
    url: "bin/leftBar.php", 
    cache: "false", 
    success: function(data) { 
     $("#leftbar").html(data); 
    }, 
    complete: function() { 
     $("#leftbar").fadeIn("normal"); 
    } 
});