我有一些循环遍历一系列div的jQuery代码。我有它所以当前的div消失了,然后下一个div在它的位置淡入。问题在于第一次转换,可见的div不淡出,它只是消失了。在第一次转换之后,其余的转换是平滑的,具有适当的淡入/淡出动作。以下是div的示例:
<div id="testimonials">
<div class="testimony current">
<p>Text1</p>
</div>
<div class="testimony">
<p>Text2</p>
</div>
</div>
以下是转换的jQuery:
$(document).ready(function() {
var cycle = window.setInterval(next, 6000);
function next() {
$('#testimonials .current').removeClass('current').fadeOut(500).next().add('#testimonials div:first').last().fadeIn(2000).addClass('current');
}
});
看到尴尬的第一次转换
答案 0 :(得分:1)
更改调用fadeOut()
和removeClass()
方法的顺序,试试这个:
function next() {
$('#testimonials .current').fadeOut(500, function(){
$(this).removeClass('current')
}).next()...
}