Javascript 如何延迟jQuery函数以等待内容淡出？

网格中有六个按钮，每个按钮包含标题（h3）和图像

单击其中一个按钮时，我使用jquery从所选按钮中提取内容（标题和图像），并将其（相同的标题和图像）更显著地显示在附近的特色部分（具有不同的样式）

为了使交互看起来/感觉平滑，我在包含特色内容的div中添加了一个fadeOut（），在特色内容更改之前添加了一个fadeOut（），在特色内容更改之后添加了一个fadeIn（）

问题是，浏览器处理命令的速度快于特征内容淡出（）。所以看起来很颠簸

简而言之，我的代码是按以下顺序编写的：

淡出特色部分

更改特色内容

淡入新的特色内容

但它的发生顺序如下：

更改特色内容

淡出特色部分

淡入新的特色内容

这是我的密码：

$('.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（）具有回调函数

$('.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();

});


});

---

工作得很有魅力。非常感谢。