jQuery淡入淡出图像循环
提问于 2012-07-20 15:46:32
我想在我的函数中做一个循环，以便幻灯片效果总是重新开始。
这是我的小提琴：http://jsfiddle.net/Be67B/
图像1转到图像2是很好的，但是我想让它淡出到图像1，然后转到图像2，所以on...to总是这样循环。
我需要在我的代码中添加什么才能使其工作？
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-07-20 15:50:50
Stack Overflow用户
发布于 2012-07-20 15:51:48
不要使用循环，只需让浏览器重复调用您的动画步骤即可：
setInterval(function(){
// your animation (in fact just a step)
}, someDelay);演示：http://jsfiddle.net/dystroy/nPh6S/
在这种情况下，动画是使用以下命令完成的：
setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 4000); Stack Overflow用户
发布于 2012-07-20 15:53:13
您可以创建一个执行转换的函数，该函数有一个回调函数作为fadeIn方法的一部分，该方法将回调自身以触发下一个转换，并且它将处于常量循环中。
下面是修改后的jsfiddle：http://jsfiddle.net/Be67B/1/
HTML：
<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />Javascript:
$(document).ready(function(){
transition(false);
});
function transition(first)
{
var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";
$("#top").delay(1000).fadeOut(function() {
$(this).attr("src",src).fadeIn(function() {
transition(!first);
});
});
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11582715
复制
腾讯云开发者
