/cambio de desvanecimiento/animar una imagen cambiante con jQuery

Question

Ésta es mi img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

quiero cambiar lentamente esta imagen src para "oneHovered.png" cuando el usuario se desplaza sobre el uso de jQuery. ¿Qué método jQuery es el mejor para hacer esto? Muchos ejemplos que veo quieren que cambie el fondo de CSS. ¿Hay algo para alterar el atributo src directamente?

Answer 1

Puede comenzar por desvanecer primero la imagen, controlando la duración del desvanecimiento utilizando el primer parámetro opcional. Una vez que se completa el fundido de salida, se activará la devolución de llamada anónima y la fuente de la imagen se reemplazará por la nueva. Después, la aparición gradual de la imagen utilizando otro valor de duración, medido en milisegundos:

HTML original:

<img src="one.png" id="one" /> 

JavaScript:

$('#one').hover(function() { 

    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

Por último, el uso de jQuery, que es mucho, mucho más fácil enlazar eventos de JavaScript dinámicamente, sin usar ningún atributo de JavaScript en el HTML mismo. Modifiqué la etiqueta original img para que solo tenga los atributos src y id.

El evento jQuery hover asegurará que la función se active cuando el usuario pase el ratón sobre la imagen. Para obtener más información, también vea jQuery fadeOut y jQuery fadeIn.

Posibles problemas con los tiempos de carga de imagen:

Si es la primera vez que un usuario se ha mantenido sobre una imagen y hacer una solicitud para ello, puede haber un ligero problema técnico en el fadeIn real, ya que habrá ser latencia del servidor mientras solicita newImage.png. Una solución para esto es precargar esta imagen. Hay varios recursos en StackOverflow on preloading images.

Answer 2

Además de @ jmort253, sería bueno si agrega un min-height antes de desvanecerse. De lo contrario, es posible que vea una sacudida de imágenes receptivas especialmente.

Mi sugerencia sería

$('#one').hover(function() { 
    // add this line to set a minimum height to avoid jerking 
    $('#one').css('min-height', $('#one').height()); 
    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

Answer 3

probar esto

<img class="product-images-cover" src="~/data/images/productcover.jpg" /> 
<div class="list-images-product"> 
<div> 
    <img class="thumbnail" src="~/data/images/product1.jpg" /> 
</div> 
<div> 
    <img class="thumbnail" src="~/data/images/product2.jpg" /> 
</div> 
</div> 

$(document).ready(function() { 
    $(".list-images-product .thumbnail").click(function (e) { 
     e.preventDefault(); 
     $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250); 
    }); 
}); 

Answer 4

Al cambiar la fuente de imagen a través de jQuery, se necesita un tiempo de carga, lo que resulta en algunos efectos parpadeantes. Modifiqué el código anterior para resolver el problema.

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() { 
    $(".list-images-product .thumbnail").attr("src",newsrc); 
    $(".list-images-product .thumbnail").on('load', function(){ 
    $(".list-images-product .thumbnail").fadeTo(500,1); 
    }); 
});