jQuery添加/移除类仅生效一次 技术问题求助

嘿，我仔细看了你的代码和遇到的问题，发现问题主要出在这几个地方：

1. 动画队列阻塞：你在关闭侧边栏的逻辑里用了.queue()，但没有在回调函数里调用.dequeue()，这会导致jQuery的动画队列被卡住，第二次执行关闭操作时，后续添加is-hidden类的操作就没法正常触发了。
2. 类操作不够严谨：直接用attr('class')重置元素类名的方式太粗暴，容易覆盖掉元素原本的基础类，换成removeClass和addClass来精准控制状态类会更稳妥。
3. 固定延迟不可靠：.delay(380)是硬编码的延迟时间，万一CSS动画时长调整，或者浏览器执行动画有细微差异，就会导致隐藏操作和动画不同步，不如监听CSS动画的animationend事件更精准。

下面是修改后的代码，我调整了关键逻辑：

$(document).ready(function() {
  // 滑动显示移动端筛选侧边栏
  $('#showFilters').on('click', function () {
    // 显示关闭按钮
    $('.filter-sidebar--mobile__close').removeClass('is-hidden');
    // 移除滑出和隐藏类，添加滑入动画类
    $('.filter-sidebar--mobile')
      .removeClass('slide-out-right is-hidden')
      .addClass('slide-in-right');
  });

  // 滑动隐藏移动端筛选侧边栏
  $('.filter-sidebar--mobile__close').on('click', function() {
    const $sidebar = $('.filter-sidebar--mobile');
    // 切换动画类：移除滑入，添加滑出
    $sidebar.addClass('slide-out-right').removeClass('slide-in-right');
    
    // 监听动画结束事件，确保动画完成后再隐藏
    $sidebar.one('animationend', function() {
      // 隐藏侧边栏
      $sidebar.addClass('is-hidden');
      // 隐藏关闭按钮
      $('.filter-sidebar--mobile__close').addClass('is-hidden');
    });
  });
});

关键改动说明： #

• 移除了.delay()和.queue()，改用animationend事件监听动画完成，这样不管动画时长是多少，都能在动画真正结束后执行隐藏操作，完全避免时间差问题。
• 用removeClass和addClass替代attr('class')来管理类名，保留了元素的基础类（比如filter-sidebar--mobile__close），只修改控制显示/动画的状态类，更灵活也更安全。
• 使用.one('animationend')而不是.on()，确保每次关闭操作只监听一次动画结束事件，避免重复绑定导致的多次触发问题。

另外要注意：确保你CSS里的slide-out-right动画正确设置了animation-name和animation-duration，这样animationend事件才能正常触发哦。

内容的提问来源于stack exchange，提问作者Blaze Rowland