jQuery: Überblenden Bild auf schweben

Question

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

<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 die folgende:

1 - erste verblasst das Bild und verschwindet . 2 - dann, von einem leeren Raum, es entsteht die neuen

So möchte ich das Skript zu verbessern, um einen echten ‚Fade in‘ Effekt zu erhalten.

Es gibt zwei große Ressourcen Ich habe jetzt erforscht:

• Cycle-Plugin - sehr cool (ich werde versuchen, diesen Zyklus Effekt auf schweben zu bekommen)
• JQuery für Designer cool, aber ich hatte ein paar Probleme mit IE (eine seltsame schwarze pixelig Grenze auf der fadeIn).

Danke sehr, wenn jemand kann eine eventuelle zusätzliche Lösung hinweisen.

Jan

Bearbeiten : CSS Trick / Lösung hier http: // paragraphe. org / stackoverflowdemos / Crossfade-images /

Answer 1

In letzter Zeit fand ich eine CSS konzentrierte Lösung. Absolut ein Bild „über“ eine andere Positionierung auf 0 mit jQuery auf Dokument bereit und verblassen zu verblassen voll auf Mouseover / verblassen wieder auf 0 auf mouseout

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 mit diesem mehr Glück

$('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 werden, wenn es irgendwo vorbelastet wird.

Answer 3

Dies ist eine Art lange fix, aber es ist das, was ich Blendungen erhalten tun. Ich verwende die Fadeout, dann als Rückruf, ich .ajax $ verwenden, um tatsächlich ein neues Bild zu laden, dann verwende ich den Erfolg: Funktion, dass die an den div hinzuzufügen (oder img), dann verwenden Sie die komplette: Funktion es zu verblassen in. Das führt zu einer glatten fadeout-newContent-FadeIn Aktion.

Hier ist ein Beispiel mit einer PHP-Datei geladen wird, ist das Prinzip 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");
    }
});