jquery - 使用 JQuery 缓慢更改/淡入淡出/动画更改图像

Question

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

当用户将鼠标悬停在使用 jQuery 上时，我想慢慢地将图像 src 更改为“oneHovered.png”。哪种 jQuery 方法最适合执行此操作？我看到很多例子都希望我改变 CSS 背景。有什么可以直接改变 src 属性吗？

Answer 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，动态绑定(bind) JavaScript 事件变得非常非常容易，而无需在 HTML 本身上使用任何 JavaScript 属性。我修改了原始的 img 标签，使其仅具有 src 和 id 属性。

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

欲了解更多内容，另请参阅jQuery fadeOut和 jQuery fadeIn .

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

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