javascript 如何在鼠标悬停时淡入不同的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6542486/
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
How to fade to a different image on mouse over?
提问by Brandon
I have two images. I would like to configure them so that when you mouseover the default image, it slowly fades to the second image. How could one go about this?
我有两个图像。我想配置它们，以便当您将鼠标悬停在默认图像上时，它会慢慢淡入第二张图像。这怎么可能呢？
Thanks!
谢谢！
回答by MadV
You could use the JQuery .animate effect. The following tutorial helped me learn how to use it and shows exactly what you're looking for. An image that fades in on mouseover and then out on mouseout. http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
您可以使用 JQuery .animate 效果。以下教程帮助我学习了如何使用它并准确显示了您正在寻找的内容。在鼠标悬停时淡入然后在鼠标移开时淡出的图像。 http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
回答by tjm
I've assumed that you want to fade back in when you mouseout, here's something to be getting started with.
我假设你想在鼠标移开时淡入，这里有一些东西要开始。
// markup
<div id="imgs">
<img src="..." id="i1"> <!-- this is the mouseover image -->
<img src="..." id="i2"> <!-- this is the default image -->
</div>
// css
img {
display:block;
position:absolute;
top: 0;
left: 0;
}
// jQuery
$(function() {
$('#imgs')
.mouseenter(function() {
$('#i2').fadeOut('slow');
})
.mouseleave(function() {
$('#i2').fadeIn('slow');
});
});
回答by Parand
Something like this should work:
这样的事情应该工作：
$('#first_image').mouseover( function() {
$(this).fadeOut('fast', function() {
$('#new_image').fadeIn('slow');
}
}
This simply fades out the old image on mouse over, and once the fadeout is complete, fades in the new one.
这只是在鼠标悬停时淡出旧图像，一旦淡出完成，就会淡入新图像。
