Question

我有以下代码显示幻灯片。我的问题是，在下一个（淡入）appaears之前，一个元素没有完全隐藏（淡出），导致我必须用CSS修复它，这不是理想的场景..这就是代码：

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

我尝试了以下但没有成功：

setInterval(function() { 
  $('#slides > li:first')
    .fadeOut(500).delay(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slidelist');
},  2000);

任何想法如何在下一个元素淡入之前让元素完全消失？

Answer 1

如果希望在前一个fadeOut完成后启动fadeIn，请使用callback函数参数执行fadeIn。回调函数将在第一个动作（fadeOut）完成后执行。

这里有2个div的例子 - 1个淡出，然后1个淡入。我在不透明度上使用了animate函数，它与fadeIn / fadeOut基本相同。

动画：http://api.jquery.com/animate/
FadeOut：http://api.jquery.com/fadeout/
淡出：http://api.jquery.com/fadein/

jsfiddle：http://jsfiddle.net/biz79/du9utty8/

var $divs = $('div');

$divs.eq(0).animate( {"opacity":"0"},1000 , function() {
    $divs.eq(1).animate( { "opacity":"1" },1000)
})

希望您可以修改代码以应用此解决方案。如果没有，请发一个小提琴告诉我，我可以帮助您调整代码。

Jquery队列排序动画

1 个答案: