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