使用JQuery缓慢更改/淡化/动画图像

这是我的img，

当用户使用jQueryhover时，我想慢慢将此图像src更改为“oneHovered.png”。 哪种jQuery方法最好这样做？ 我看到很多例子都希望我改变CSS背景。 有什么可以直接改变src属性吗？

Answer 1

您可以首先淡出图像，使用第一个可选参数控制淡出的持续时间。 淡出完成后，将触发匿名回调，并将图像的源替换为新的。 然后，我们使用另一个持续时间值淡入图像，以毫秒为单位：

原始HTML：

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); }); }); 

最后，使用jQuery，动态绑定JavaScript事件要轻松得多，而不使用HTML本身的任何JavaScript属性。 我修改了原始的img标记，以便它只具有src和id属性。

jQueryhover事件将确保当用户使用鼠标hover在图像上时该函数将触发。

有关更多阅读，请参阅jQuery fadeOut和jQuery fadeIn 。

图像加载时间可能出现的问题：

如果这是用户第一次hover在图像上并请求它，实际的fadeIn可能会有轻微的故障，因为服务器在请求newImage.png时会有延迟。 解决方法是预加载此图像。 在预加载图像时 ， StackOverflow上有几个资源。

Answer 2

试试这个

  
 
  
 
  
 
 $(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 3

除了@ jmort253之外，如果你在淡出之前添加一个min-height会更好。 否则，您可能会看到特别是响应式图像的抖动。

我的建议是

 $('#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 4

通过jquery更改图像源时，需要一个加载时间，这会导致一些闪烁效果。 我修改了上面的代码来解决这个问题。

 $(".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); }); });