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

How can I delay jQuery functions to wait for content to fadeOut?

本文关键字：等待 淡出 函数 jQuery 何延迟 延迟      更新时间：2024-05-04

网格中有六个按钮，每个按钮都包含一个标题（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();


});

一切都很好（点击按钮后内容会正确更新），所以我并不是在寻求调试帮助，也不是在寻求如何以更简洁的方式编写这篇文章的建议。只是想知道如何将内容的更改延迟足够长的时间，以便fadeOut发生。

提前感谢您的帮助！

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

});
相关文章：