Question

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

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

DIV是跳跃的，很明显，在开始淡入其他DIV之前，脚本不会等待动画完成。这是为什么？

Nota bene ：我知道我可能会链接一个.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/

jQuery函数回调和动画计时

1 个答案: