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()和回调要求每个元素选择的比赛，你必须也意识到，对于已经隐藏要素的complete回调被称为立即（它必须完成的工作.. ..completed，对不对？）。

消除“瞬间完成”在这里，你可以只隐藏: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') 

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%'); 
});