按钮筛选面板过渡动画优化：避免切换时元素短暂全部显现

嘿，我完全懂你现在的困扰——那种点击筛选按钮后所有面板先突然冒出来再消失的跳脱感，确实很影响体验！咱们来把这个动画改成你想要的「先淡出旧面板，再淡入新面板」的流畅效果，其实不用复杂的if/else堆逻辑，调整一下动画的执行顺序就好。

问题根源 #

你当前的代码逻辑是先把所有.post都淡入，再把不符合筛选条件的面板淡出，这就导致了中间所有面板短暂全部显示的瞬间，这就是视觉闪烁的原因。

修复方案 #

我们需要调整动画的执行顺序：先让当前显示但不符合新筛选的面板淡出，等淡出完成后，再让符合条件但隐藏的面板淡入。下面是修改后的代码：

$("#filter button").on("click", function() {
  var filtertag = $(this).attr('class');
  // 定位需要隐藏的面板：当前显示、但不符合新筛选条件的
  var $panelsToHide = $('.post:visible:not(.' + filtertag + ')');
  // 定位需要显示的面板：当前隐藏、且符合新筛选条件的
  var $panelsToShow = $('.post:hidden.' + filtertag);

  if ($panelsToHide.length > 0) {
    // 如果有需要隐藏的面板，先执行淡出动画，动画完成后再淡入目标面板
    $panelsToHide.fadeOut(function() {
      $panelsToShow.fadeIn();
    });
  } else {
    // 如果没有需要隐藏的面板（比如从Filter2切到Show All，或者当前已经是Filter2），直接显示目标面板
    $panelsToShow.fadeIn();
  }

  // 单独处理「Show All」按钮：直接显示所有隐藏的面板
  if (filtertag === 'all') {
    $('.post:hidden').fadeIn();
  }
});

代码说明 #

• 用:visible和:hidden选择器精准定位要操作的面板，避免不必要的DOM操作
• 利用jQuery动画的回调函数，确保淡出动画完全结束后再执行淡入，实现无缝衔接
• 单独处理「Show All」按钮的逻辑，保证点击后能一次性显示所有面板

额外优化建议 #

1. 标记当前选中的筛选按钮：给点击的按钮加个active类，方便用户知道当前选中的筛选，比如：

$("#filter button").on("click", function() {
  // 先移除所有按钮的active类
  $("#filter button").removeClass('active');
  // 给当前点击的按钮添加active类
  $(this).addClass('active');
  
  // 上面的筛选逻辑...
});

然后在CSS里给active类加个样式，比如：

#filter button.active {
  background-color: #007bff;
  color: white;
}

2. 自定义动画速度：可以给fadeOut()和fadeIn()传入毫秒数调整动画时长，比如fadeOut(400)就是400毫秒完成淡出，根据你的需求调整即可。

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