用 JQuery 慢慢改变/淡入淡出/动画改变图像

Posted 2023-05-08

【中文标题】用 JQuery 慢慢改变/淡入淡出/动画改变图像

【英文标题】：Slowly change/fade/animate an image changing with JQuery

【发布时间】：2012-05-15 13:06:44

【问题描述】：

这是我的图片， <img src="one.png" id="one" onMouseOver="animateThis(this)">

当用户使用 jQuery 将鼠标悬停在上面时，我想慢慢地将这个图像 src 更改为“oneHovered.png”。哪种 jQuery 方法最好做到这一点？我看到的很多示例都希望我更改 CSS 背景。有什么可以直接改变 src 属性吗？

【参考方案1】：

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

原始 html：

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

);

最后，使用 jQuery，动态绑定 JavaScript 事件要容易得多，而无需在 HTML 本身上使用任何 JavaScript 属性。我修改了原来的img 标签，使它只有src 和id 属性。

jQuery hover 事件将确保在用户将鼠标悬停在图像上时触发该函数。

更多阅读内容，另见jQuery fadeOut和jQuery fadeIn。

图片加载时间可能存在的问题：

如果这是用户第一次将鼠标悬停在图像上并发出请求，实际的淡入可能会出现轻微故障，因为在请求 newImage.png 时服务器会有延迟。解决方法是预加载此图像。 *** on preloading images 上有几个资源。

【参考方案2】：

试试这个

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

【参考方案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);
    );

);

【参考方案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);
  );
 );