Javascript 如何使用 JQuery 添加淡入淡出或图像过渡效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4857338/
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 add fading or image transition effect using JQuery?
提问by kheya
I have just one <img>element on my page. I change the srcattribute of this image every 7 seconds.
<img>我的页面上只有一个元素。我src每 7 秒更改一次此图像的属性。
I see the new images every 7 secs, but it would be nicer if I can add some fading or transitions effect when loading new image.
我每 7 秒看到一次新图像，但如果我可以在加载新图像时添加一些淡入淡出或过渡效果会更好。
Does some have simple script for this?
有些人为此提供简单的脚本吗？
I don't need any plugin. Just need some clue or few lines of sample for doing it.
我不需要任何插件。只需要一些线索或几行样本就可以做到。
回答by Brad Christie
Despite what KaiQing mentioned, you can use the callbacks ability of jQuery to fade in/out the image while you're changing it. This can be done like so: http://www.jsfiddle.net/bradchristie/HsKpq/1/
尽管 KaiQing 提到了什么，您可以使用 jQuery 的回调功能在更改图像时淡入/淡出图像。这可以这样做：http: //www.jsfiddle.net/bradchristie/HsKpq/1/
$('img').fadeOut('slow',function(){
$(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});
回答by gilly3
You'll want to use two images:
您需要使用两个图像：
<img id="backImg" />
<img id="frontImg" />
Set #backImgto be behind #frontImglike so:
像这样设置#backImg在后面#frontImg：
#backImg
{
position: absolute;
}
Then, in your code that fires every 7 seconds, fadeOut the front image... this will automatically do your crossfade effect because the back image is already loaded behind it. When the fade is done, set the source of the front image to the back image's src, show it, and pre-load the next image into the back image:
然后，在每 7 秒触发一次的代码中，淡出前面的图像...这将自动执行淡入淡出效果，因为后面的图像已经加载到它后面。淡出完成后，将前图像的源设置为后图像的 src，显示它，并将下一个图像预加载到后图像中：
function transitionImages(preloadImgUrl)
{
$("#frontImg").fadeOut("slow", function()
{
$("#frontImg").attr("src", $("#backImg").attr("src")).show();
$("#backImg").attr("src", preloadImgUrl);
}
}
This all assumes your images are identically sized. If not, you'll want to be just a little more elaborate with the css and wrap the images in divs that fade out.
这一切都假设您的图像大小相同。如果没有，您将需要对 css 进行更精细的处理，并将图像包装在淡出的 div 中。
回答by Kai Qing
You can't do this with just one image.
你不能只用一张图片来做到这一点。
Check this out:
看一下这个：
<div id="main_over"></div>
<div id="main_img"></div>
<div id="himg" style="display:none; clear:both; margin-top:40px;">
<img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" />
<img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" />
<img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" />
<img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" />
</div>
<style>
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('#himg img').each(function(){
if(i == 0)
{
$('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
if(i == 1)
{
$('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
i ++;
slide.arr.push($(this).attr('src'));
});
setTimeout(function(){
if(slide.arr.length < 2)
slide.fade(0);
else
slide.fade(2);
}, 3000);
});
var slide = {
arr: Array(),
fade: function(i)
{
$('#main_over').fadeOut("medium");
setTimeout(function(){slide.next(i);}, 1000);
},
next: function(i)
{
$('#main_over').html($('#main_img').html());
$('#main_over').css('display', 'block');
$('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');
i++;
if(i >= slide.arr.length)
i = 0;
setTimeout(function(){slide.fade(i);}, 3000);
}
}
</script>
