jQuery 函数回调和动画计时

Question

我想让一个 DIV 在淡出另一个 DIV 后淡入。因为一个 DIV 在另一个 DIV 内部，所以在子 DIV 淡入之前，我需要父 DIV 完全淡出（清除可能显示的任何其他内容）。我尝试在下面的代码中使用 jQuery 回调函数为 no有用。

$('#viewer a').click(function(e) {
    e.preventDefault();
    $('#content > *').fadeOut(500, function(){
        $('#kiosk').fadeIn(250);
    });
});

DIV 是跳跃的，很明显脚本没有等待动画完成，然后开始淡入另一个 DIV。这是为什么呢？

注意事项：我知道我可能会链接一个 .delay() 或类似的东西，但我宁愿在回调函数就是为了这个目的！

Answer 1

我猜这部分不稳定是因为您正在褪色的元素，而这些元素的祖先目前正在褪色。

当你淡化某些东西时，它也会自动淡化它的后代，所以你应该这样做。

$('#content').children().fadeOut(500, function(){
    $('#kiosk').fadeIn(250);
});

现在请记住，带有.fadeIn() 的回调将为淡出的每个 元素调用一次。这也可能是一个问题。

由于（大概）#kiosk 是#content 的直系后代，您可以直接将fadeIn() 链接到末尾。不需要.delay()。

试试看：http://jsfiddle.net/rrM28/

$('#content').children().fadeOut(500).filter('#kiosk').fadeIn(250);

---

编辑：从您在评论中更新的示例中，fadeIn() 立即运行，因为 #kiosk 最初是隐藏的，因此该动画立即完成，并且链继续.

一种解决方案是将.fadeIn() 放置在动画.queue() 中，这样它只会在fadeOut() 完成后运行。

试试看：http://jsfiddle.net/rrM28/4

$('#viewer a').click(function(e) {
    e.preventDefault();
           // Don't fadeOut the #kiosk
    $('#content').children(':not(#kiosk)').fadeOut(500)
           // Place the fadeIn of #kiosk in the next step of the animation queue
        .queue(function() {
            $(this).siblings('#kiosk').fadeIn(250).dequeue();
        });
});

• http://api.jquery.com/queue/