如何延迟jQuery函数等待内容fadeOut？

Question

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

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

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

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

简而言之，我的代码按此顺序编写：

1. 淡出特色栏目
2. 更改精选内容
3. 淡入新的精选内容

但它按此顺序发生：

1. 更改精选内容
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();

});


});