这是我的img，<img src="one.png" id="one" onMouseOver="animateThis(this)">
当用户将鼠标悬停在使用 jQuery 上时，我想慢慢地将这个图像 src 更改为“oneHovered.png”。哪种 jQuery 方法最适合执行此操作？我看到很多例子都要求我改变 CSS 背景。有什么可以直接改变 src 属性吗？
您可以首先淡出图像，使用第一个可选参数控制淡出的持续时间。淡出完成后，将触发匿名回调，并且图像源将替换为新图像源。然后，我们使用另一个持续时间值（以毫秒为单位）淡入图像：
原始 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 and id属性。
The jQuery 悬停 http://api.jquery.com/hover/事件将确保当用户将鼠标悬停在图像上时触发该函数。
如需更多阅读，另请参阅jQuery 淡出 http://api.jquery.com/fadeOut/ and jQuery 淡入 http://api.jquery.com/fadeIn/.
图像加载时间可能出现的问题：
如果这是用户第一次将鼠标悬停在图像上并发出请求，则实际的淡入可能会出现轻微故障，因为服务器在请求 newImage.png 时会出现延迟。解决此问题的方法是预加载此图像。有几个资源StackOverflow 关于预加载图像 https://stackoverflow.com/questions/476679/preloading-images-with-jquery.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
