如何推遲jQuery函數等待內容淡出？

Question

網格中有六個按鈕，每個按鈕都包含一個標題（h3）和一個圖像。

當點擊其中一個按鈕時，我使用jquery從選定的按鈕中提取內容（標題和圖像），並在特色（不同樣式）中顯示它（相同標題和圖像）部分附近。

爲了使交互的外觀/感覺平滑，我在添加fadeOut（）到包含特色內容的特色內容被更改之前，並在其更改後的fadeIn（）。

問題是，瀏覽器在處理的命令比特色內容可以更快淡出（）。所以它看起來很顛簸。

總之，我的代碼是用這個命令：

1. 淡出功能的部分
2. 變化與新的特色內容

特色內容

淡出，但它的發生在這個順序：

1. 查NGE特色內容
2. 淡出功能的部分
3. 推上新的特色內容

這裏是我的代碼：

$('.obst-tile').click(function(){ 

    $(this).parent().children().removeClass('is-selected'); 
    $(this).addClass('is-selected'); 

    $('.obst-feature').fadeOut(); 

    var selectedId = $('.is-selected').attr('id'); 
    var imgLocation = $('#' + selectedId + ' img').attr('src'); 
    var featureTitle = $('#' + selectedId).find('h3').text(); 


$('.obst-featured-img').attr('src',imgLocation); 
$('.obst-desc-headline').text(featureTitle); 



    $('.obst-feature').fadeIn(); 




}); 

，一切工作正常（內容更新，點擊按鈕時正確） ，所以我沒有真正在尋找幫助調試這個問題，也沒有提供關於如何以更簡潔的方式寫這個問題的建議。試圖弄清楚如何延遲內容的變化足夠長的時間以使fadeOut發生。

在此先感謝您的幫助！

Answer 1

$ .fadeOut（）具有回調函數;

$('.obst-tile').click(function(){ 

    $(this).parent().children().removeClass('is-selected'); 
    $(this).addClass('is-selected'); 

    $('.obst-feature').fadeOut(function(){ 

    var selectedId = $('.is-selected').attr('id'); 
    var imgLocation = $('#' + selectedId + ' img').attr('src'); 
    var featureTitle = $('#' + selectedId).find('h3').text(); 


$('.obst-featured-img').attr('src',imgLocation); 
$('.obst-desc-headline').text(featureTitle); 



    $('.obst-feature').fadeIn(); 

}); 


});