jQuery: immagine con dissolvenza incrociata al passaggio del mouse

Question

Sto cercando di implementare uno script "dissolvenza in" che influirebbe su due immagini:

<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>

Questo pezzo di jQuery mi dà quanto segue:

1 - prima l'immagine si attenua e scompare 2 - quindi, da uno spazio vuoto, emerge quello nuovo.

Quindi vorrei migliorare la sceneggiatura per ottenere un vero effetto di dissolvenza.

Ci sono due grandi risorse che ho esplorato ormai:

• Plugin Cycle - molto bello (cercherò di ottenere l'effetto del ciclo al passaggio del mouse)
• JQuery for Designers bello, ma ho avuto un sacco di problemi con IE (uno strano bordo nero pixelato sul fadeIn).

Grazie mille se qualcuno può segnalare un'eventuale soluzione aggiuntiva.

Jan

MODIFICA : trucco / soluzione CSS qui http: // paragrafi. org / stackoverflowdemos / crossfade-images /

Answer 1

Ultimamente ho trovato una soluzione focalizzata su CSS: posizionare assolutamente un'immagine "sopra" un altro, sfumandolo a 0 con jQuery su Document pronto e dissolvendosi al massimo al passaggio del mouse / dissolvendo nuovamente a 0 al passaggio del mouse.

Answer 2

Il modo in cui stai chiamando la seconda dissolvenza, in quanto una richiamata alla dissolvenza originale garantirà che vengano eseguite una dopo l'altra.

Potrebbe avere più fortuna con questo

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

Anche se sarai comunque al capriccio del tempo di caricamento della seconda immagine a meno che non sia precaricato da qualche parte.

Answer 3

Questa è una specie di correzione lunga, ma è quello che faccio per ottenere dissolvenze fluide. Uso Fadeout, quindi come callback, uso $ .ajax per caricare effettivamente una nuova immagine, quindi uso la funzione success: di quella per aggiungere il div (o img) quindi uso la funzione complete: per sfumarla . Ciò si traduce in una fluida azione di dissolvenza-nuovo-contenuto-dissolvenza.

Ecco un esempio di caricamento di un file php, il principio è lo stesso con un'immagine:

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