jQuery 使用淡入淡出效果更改图像 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5979418/
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
jQuery Change Image src with Fade Effect
提问by WebDevDude
I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using:
我正在尝试创建一种效果，您单击缩略图图像，缩略图的链接将替换主图像，但将其淡入。这是我目前使用的代码：
$(".thumbs a").click(function(e) {
e.preventDefault();
$imgURL = $(this).attr("href");
$(".boat_listing .mainGallery").fadeIn(400, function() {
$(".boat_listing .mainGallery").attr('src',$imgURL);
});
});
This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work?
这可以工作并替换没有淡入淡出效果的图像。我需要更改什么才能使淡入效果起作用？
回答by Sylvain
You have to make it fadeOut()first, or hide it.
你必须先制作它fadeOut()，或者隐藏它。
Try this :
尝试这个 ：
$(".thumbs a").click(function(e) {
e.preventDefault();
$imgURL = $(this).attr("href");
$(".boat_listing .mainGallery")
.fadeOut(400, function() {
$(".boat_listing .mainGallery").attr('src',$imgURL);
})
.fadeIn(400);
});
It should fadeOutthe image, then change the srcwhen it's hidden, and then fadeIn.
它应该fadeOut是图像，然后更改src隐藏的时间，然后更改fadeIn.
Edit:you can find a more recent & better solution in Sandeep Pal's anwser
编辑：您可以在Sandeep Pal 的 anwser 中找到更新更好的解决方案
回答by Sandeep Pal
I thing instead of using FadeIn and fadeOut, its better to use fadeTo functionality as fadeIn and fadeOut created a time gap between them for few micro-seconds.
我认为与其使用 FadeIn 和fadeOut，不如使用fadeTo 功能，因为fadeIn 和fadeOut 在它们之间创建了几微秒的时间间隔。
I have used above code from Sylvain : thanks to him
我使用了以上来自 Sylvain 的代码：感谢他
$("#link").click(function() {
$("#image").fadeTo(1000,0.30, function() {
$("#image").attr("src",$("#link").attr("href"));
}).fadeTo(500,1);
return false;
});
回答by Aamir Hussain
I reproduced the given samples above. It gives a strange flickering, which I found that it waits for image to load after it's opacity is restored to 1. I modified the code by Sandeep.
我复制了上面给定的样本。它给出了一个奇怪的闪烁，我发现它在不透明度恢复为 1 后等待图像加载。我修改了 Sandeep 的代码。
$("#link").click(function() {
$("#image").fadeTo(1000,0.30, function() {
$("#image").attr("src",$("#link").attr("href"));
$("#image").on('load', function(){
$("#image").fadeTo(500,1);
});
});
return false;
});`
回答by HymanJoe
You cannot fade-in something that is already at 100% alpha :)
你不能淡入已经是 100% alpha 的东西:)
In other words, you either fade it out or hide it, and then fade it in.
换句话说，你要么淡出它，要么隐藏它，然后淡入。
I made this example, basically, I hide it and then fade it:
我做了这个例子，基本上，我隐藏它然后淡化它：
