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>

Answer 2

我会在你的脚本中添加一个条件来只生成可见元素faceOut（），这可以这样做：

add_executable(hello hello.cpp)
install(TARGETS hello DESTINATION "hello/bin")

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

2 个答案: