如何推迟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(); 

}); 


});