Question

我的印象是，在fadeOut完成之后，下面的回调函数中的css规则才会执行。情况似乎并非如此。回调函数中的行实际上是在单击时执行的。我出错的任何想法？

$('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()和回调是为选择器匹配的每个元素调用的，你必须也意识到已经隐藏的元素{{1回调被立即称为（它必须完成的工作是......完成了，对吧？）。

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

complete

或者你可以通过.filter()调用获得相同的元素，如下所示：

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

Answer 2

传递给fadeOut的完整回调对于动画的每个元素执行一次，当该元素完成动画时。因此，如果您的#lightbox, .lightbox_panel选择器与多个元素匹配，则会多次调用您的回调。

如果你想等到一切都完成，你可以这样做：

var items = $('#lightbox, .lightbox_panel');
var count = items.length;
items.fadeOut(300, function() {
    if (--count > 0) return;
    $('.instructor_video').css('left','150%');
    $('.instructor_bio').css('left','50%');
});

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

2 个答案: