使用 JQuery 缓慢更改/淡化/动画更改图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10475058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slowly change/fade/animate an image changing with JQuery
提问by zafrani
This is my img,
<img src="one.png" id="one" onMouseOver="animateThis(this)">
这是我的img
<img src="one.png" id="one" onMouseOver="animateThis(this)">
I want to slowly change this image src to "oneHovered.png" when the user hovers over using jQuery. Which jQuery method is best to do this? A lot of examples I see want me to change the CSS background. Is there anything to alter the src attribute directly?
当用户使用 jQuery 悬停时，我想慢慢将此图像 src 更改为“oneHovered.png”。哪种 jQuery 方法最适合执行此操作？我看到的很多示例都希望我更改 CSS 背景。有什么可以直接改变 src 属性的吗？
回答by jmort253
You could start by first fading out the image, controlling the duration of the fadeout using the first optional parameter. After the fade out is complete, the anonymous callback will fire, and the source of the image is replaced with the new one. Afterwards, we fade in the image using another duration value, measured in milliseconds:
您可以首先淡出图像，使用第一个可选参数控制淡出的持续时间。淡出完成后，匿名回调将触发，图像的源被替换为新的。之后，我们使用另一个持续时间值（以毫秒为单位）淡入图像：
Original HTML:
原始 HTML：
<img src="one.png" id="one" />
JavaScript:
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);
});
});
Finally, using jQuery, it's much, much easier to bind JavaScript events dynamically, without using any JavaScript attributes on the HTML itself. I modified the original imgtag so that it just has the srcand idattributes.
最后，使用 jQuery，动态绑定 JavaScript 事件要容易得多，而无需在 HTML 本身上使用任何 JavaScript 属性。我修改了原始img标签，使其只有src和id属性。
The jQuery hoverevent will ensure that the function fires when the user hovers over the image with the mouse.
在jQuery的悬停事件将确保功能火灾时，用户将鼠标悬停鼠标的图像。
For more reading, also see jQuery fadeOutand jQuery fadeIn.
如需更多阅读，另请参阅jQuery 淡入淡出和jQuery 淡入淡出。
Possible problems with image load times:
图片加载时间可能存在的问题：
If it's the first time a user has hovered over an image and making a request for it, there may be a slight glitch in the actual fadeIn, since there will be latency from the server while it's requesting newImage.png. A workaround for this is to preload this image. There are several resources on StackOverflow on preloading images.
如果这是用户第一次将鼠标悬停在图像上并对其发出请求，则实际的淡入淡出可能会出现轻微故障，因为服务器在请求 newImage.png 时会有延迟。对此的解决方法是预加载此图像。StackOverflow 上有一些关于预加载图像的资源。
回答by November Man
try this
尝试这个
<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);
});
});
回答by Kamrul
In addition to @jmort253, it would be nice if you add a min-heightbefore fading out. Otherwise you might see a jerking for responsive images especially.
除了@jmort253，如果min-height在淡出之前加一个就好了。否则，您可能会看到响应式图像的抖动。
My suggestion would be
我的建议是
$('#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);
});
});
回答by Aamir Hussain
When changing the image source through jquery, it takes a loading time, which results in some flickering effects. I modified the above code to solve the issue.
通过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);
});
});
