javascript - 用jQuery淡入淡出创建队列

我正在尝试创建一个简单的序列：找到第一个元素，隐藏其兄弟元素，然后将其淡入。但是，它不等待其兄弟姐妹首先消失：

var $firstCaption = $('.caption').first();

$firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut(function(){
     $firstCaption.fadeIn(); // this is not waiting
});

我可以使用延迟，但是我认为这是一个很麻烦的解决方案？还有其他方法吗？

JSFIDDLE：

http://jsfiddle.net/tmyie/8VjLD/

最佳答案

您可以使用一个承诺：

DEMO jsFiddle

$('a').click(function () {
    var $firstCaption = $('.caption').first();
    $firstCaption.appendTo('.caption-content').siblings('.caption').fadeOut().promise().done(function () {
        $firstCaption.fadeIn();
    });
});

顺便说一句，如果按钮连续单击多次，您可能希望在此处使用.finish()：

DEMO with finish

$firstCaption.appendTo('.caption-content').siblings('.caption').finish()...

关于javascript - 用jQuery淡入淡出创建队列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22358431/