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

Question

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

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

为了使交互看起来/感觉更流畅，我在特色内容更改之前向包含特色内容的 div 添加了一个 fadeOut() ，在更改之后添加了一个 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();




});

一切正常(单击按钮时内容会正确更新)，因此我并不是在真正寻求调试此问题的帮助，也不是寻求有关如何以更简洁的方式编写此内容的建议。只是想弄清楚如何将内容更改延迟足够长的时间以使淡出发生。

预先感谢您的帮助!

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();

});


});