我需要三个交替淡入淡出的元素。我大部分时间都在使用它，但由于某种原因，当它返回到第一个元素时，它会跳过淡入淡出并直接出现。我敢肯定，我在这里遗漏了一些相当明显的东西，但我只是没有看到它。
如有任何帮助，我们将不胜感激。 谢谢!
jsfiddle 链接: http://jsfiddle.net/hcarleton/qLNyt/
HTML
<body>
<div id='one' class='selection'>
<h3>ONE</h3>
</div>
<div id='two' class='selection'>
<h3>TWO</h3>
</div>
<div id='three' class='selection'>
<h3>THREE</h3>
</div>
<div id='console'>
</div>
</body>
CSS
div {
width:100px;
height:75px;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
#one {
background-color:#aabbcc;
}
#two {
background-color:#bbccaa;
}
#three {
background-color:#ccaabb;
}
#console {
width:500px;
position:absolute;
top:200px;
left:25px;
background-color:#dddddd;
}
.top {
z-index:20;
}
p {
margin:5px;
}
javascript/jQuery
$(document).ready(function() {
var fade = 1000;
var wait = 1000;
var $selection = $('.selection');
var selectionQty = $selection.length;
var c = 0;
$('.selection').fadeOut(0);
$('.selection').first().fadeIn(0);
setInterval(
function() {
c+=1;
if(c == selectionQty) {
c = 0;
}
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
},
fade+wait
);
$('#console').append('<p>-'+selectionQty+'</p>');
});
最佳答案
您不能使用 setInterval() 来维护同步的事件链。在动画的回调函数中使用 setTimeout()。
同时触发三个动画。
$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);
谁先/最后完成？通常，您会希望在最后一个完成时使用 setTimeout()(也有异常(exception))。
关于javascript - 有人可以看看我遇到问题的一些 jQuery 吗？(setInterval，fadeIn/fadeOut)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15367191/