jquery - fadeOut 回调在动画完成之前执行

Question

我的印象是，下面的回调函数中的 css 规则只有在 fadeOut 完成后才会执行。事实似乎并非如此。回调函数中的行实际上是在单击时执行的。有什么想法我哪里出错了吗？

$('a.close_link, #lightbox').click(function(){  
    $('#lightbox, .lightbox_panel').fadeOut(300,function(){
        $('.instructor_video').css('left','150%');
        $('.instructor_bio').css('left','50%');
    });
    return false;
 });

Answer 1

您的'#lightbox, .lightbox_panel'选择器可能已经匹配隐藏元素。请记住 .fadeOut()并且为选择器匹配的每个元素调用回调，您还还意识到，对于已经隐藏的元素，完整回调被称为>立即(它必须完成的工作是......完成，对吗？)。

要消除此处的“立即完成”，您可以隐藏 :visible实际需要隐藏的元素，如下所示:

$('#lightbox:visible, .lightbox_panel:visible').fadeOut(300,function(){
    $('.instructor_video').css('left','150%');
    $('.instructor_bio').css('left','50%');
});

或者您可以使用 .filter() 以稍微不同的方式获取相同的元素。调用，如下所示:

$('#lightbox, .lightbox_panel').filter(':visible')