jQuery: imagen de fundido cruzado al pasar el mouse por encima

Question

Estoy tratando de implementar un script de 'fundido en' que afectaría a dos imágenes:

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

Este bit de jQuery me da lo siguiente:

1 - primero la imagen se desvanece y desaparece 2 - luego, de un espacio en blanco, emerge el nuevo.

Por lo tanto, me gustaría mejorar el script para obtener un verdadero efecto de "fundido de entrada".

Hay dos grandes recursos que he estado explorando por ahora:

• Cycle Plugin - muy bueno (trataré de obtener ese efecto de ciclo al pasar el mouse)
• JQuery for Designers genial, pero tuve un montón de problemas con IE (un extraño borde pixelado negro en el fadeIn).

Muchas gracias si alguien puede señalar una eventual solución adicional.

Jan

EDITAR : truco / solución CSS aquí http: // paragraphe. org / stackoverflowdemos / crossfade-images /

Answer 1

Últimamente encontré una solución centrada en CSS: posicionar absolutamente una imagen '' sobre '' otro, desvaneciéndolo a 0 con jQuery en el documento listo, y desvaneciéndose por completo al pasar el mouse / desvanecerse nuevamente a 0 al salir del mouse.

Answer 2

La forma en que está llamando al segundo desvanecimiento, ya que una devolución de llamada al desvanecimiento original garantizará que se ejecuten uno tras otro.

Podría tener más suerte con esto

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

Aunque todavía estará a la altura del tiempo de carga de la segunda imagen a menos que se precargue en algún lugar.

Answer 3

Este es un tipo de solución larga, pero es lo que hago para obtener desvanecimientos suaves. Uso Fadeout, luego como devolución de llamada, uso $ .ajax para cargar una nueva imagen, luego uso el éxito: función de eso para agregar el div (o img) y luego uso la función complete: para atenuarlo pulg. Esto da como resultado una acción suave de desvanecimiento-nuevo-contenido-desvanecimiento.

Aquí hay un ejemplo cargando un archivo php, el principio es el mismo con una imagen:

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