jquery - 如何在过渡期间过滤选项而不让所有内容重新出现？

Question

我正在尝试实现一个带有按钮的过滤器，您可以在其中单击一个按钮，页面上的某些面板就会被过滤掉。在 w3schools 和堆栈溢出之间，我已经能够弄清楚基础知识，但我在动画方面遇到了麻烦。

问题:
这就是现在发生的事情。假设我只显示过滤器 1 选项。

• 我点击过滤器 2
• 过滤器 1、2 和 3 的所有面板出现
• 过滤器 1 和 3 淡出的选项
• 滤镜 2 的选项淡入

我怎样才能让它在转换之间停止出现所有内容？我正在努力实现这样的目标:

• 正在显示过滤器 1 的选项
• 我点击过滤器 2
• 过滤器 1 选项淡出
• 过滤器 2 选项淡入

我觉得可能有一个简单的解决方法，但我找不到任何东西(也许我不知道要找什么？)。我想尝试一个大的 if/else 循环，其内容类似于“如果选择了过滤器 1 并且刚刚选择了过滤器 2，则淡出过滤器 1 并淡入过滤器 2”。但这看起来很乱。

感谢您的帮助。

按钮和面板结构:

<div id='filter'>
    <center>
        <button class='all'>Show All</button>
        <button class='filter1'>Filter 1</button>
        <button class='filter2'>Filter 2</button>
        <button class='filter3'>Filter 3</button>
    </center>
</div>

<div class='post filter1 all'>
     <div class="col-sm-6"> 
        <div class="panel panel-default">
            <div class="panel-body">
                   <a href="lessons/option1.php"><img 
                   src="images/option1.png" alt="" class="standard-image">
                   </a> 
            </div>
        </div>
     </div>
</div>

过滤代码:

<script>
$("#filter button").each(function() {
    $(this).on("click", function(){
        var filtertag = $(this).attr('class');
        $('.post').fadeIn();
        $('.post:not(.' + filtertag + ')').fadeOut();
    });
});
</script>

Answer 1

解决方案是只淡入匹配的元素。此外，此处的 .each() 是不必要的，因为 .on() 已经将处理程序附加到每个匹配的元素。

$("#filter button").on("click", function(){
  var filtertag = $(this).attr('class');
  $('.post.' + filtertag).fadeIn();
  $('.post:not(.' + filtertag + ')').fadeOut();
});

.post.all { display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='filter'>
    <center>
        <button class='all'>Show All</button>
        <button class='filter1'>Filter 1</button>
        <button class='filter2'>Filter 2</button>
        <button class='filter3'>Filter 3</button>
    </center>
</div>

<div class='post filter1 all'>
Filter 1
</div>

<div class='post filter2 all'>
Filter 2
</div>

<div class='post filter3 all'>
Filter 3
</div>