Jquery队列顺序动画

Jquery queue sequenced animations

本文关键字：动画 顺序 队列 Jquery      更新时间：2023-09-26

我有下面的代码来显示幻灯片。我的问题是，在下一个（淡入）应用程序出现之前，一个元素没有完全隐藏（淡出），导致我不得不用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);

有什么想法吗？我该如何在下一个元素消失之前让它完全消失？

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

下面是一个2个div的例子，1个淡出，然后1个淡出。我在不透明度上使用了animate函数，它本质上与fadeIn/fadeOut相同。

动画制作：http://api.jquery.com/animate/
淡出：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)
})

希望您可以修改代码以应用此解决方案。如果没有，发布一个小提琴，让我知道，我可以帮助调整你的代码。

相关文章：