Javascript 如何在过滤器/切换效果上制作动画？

我想为我的搜索引擎制作动画，但我不知道怎么做

我的HTML中有这个

<div id="companyRoster" class="companyRoster container">
    <div class="row mb-2">
        <div class="col-lg-1 col-md-2 col-sm-3 col-6 employee">
            <img src="images/j-doe.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="bottom" data-content='<b>Position:</b> Team Leader Integration Services <br> <b>Department:</b> IT <br> <b>Email:</b> <a href="mailto:j.doe@aaa.aa">j.doe@aaa.aa</a> <br> <b>Skype:</b> <a href="skype:j.doe?userinfo">j.doe</a>'><i hidden>J Doe Team Leader Integration Services</i>
        </div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-6 employee">
            <img src="images/john-d.jpg" alt="..." class="img-fluid rounded-circle padding-0" data-toggle="popover" title="John Doe" data-placement="bottom" data-content='<b>Position:</b> Software Engineer <br> <b>Department:</b> IT <br> <b>Email:</b> <a href="mailto:john.d@aaa.aa">john.d@aaa.aa</a> <br> <b>Skype:</b> <a href="skype:john.d?userinfo">john.d</a>'><i hidden>John D Software Engineer</i>
        </div>
    </div>
</div>

它现在就像一个魔咒，但我想在所有其他东西消失时以及它们再次出现时添加动画（比如淡入/淡出）

当前外观：

---

如果您只需要淡入淡出效果，可以使用fadeToggle（）jquery函数

您可以“播放”可见性和不透明度。在每个员工中添加。显示类。在搜索字段中的每个关键事件中，从所有员工中删除类show，然后仅将其添加到将要显示的员工中。还可以使用setTimeout函数来实现淡入淡出效果。检查更新后的JSFIDLE波纹管：

$（文档）.ready（函数（）{
$（“#searchField”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“.employee”）.removeClass（“show”）；
setTimeout（函数（）{
$（“.employee”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1.addClass（“show”）；
});
},300);
});
});

紧急薪酬-公司名册
.雇员{
可见性：隐藏；
不透明度：0；
-webkit过渡：0.5s全轻松；
-moz过渡：0.5s全轻松；
-ms过渡：0.5s全轻松；
-o型过渡：0.5s全轻松；
过渡期：0.5s全部缓解；
}
.employee.show{
能见度：可见；
不透明度：1；
}
.employee>div{
宽度：200px；
高度：200px；
背景：红色；
利润率：10px；
浮动：左；
}
公司名册
房间位置
应用程序职责
搜索
J Doe团队负责人集成服务
J Doe团队负责人集成服务
J Doe团队负责人集成服务
这是您要找的。同位素应用广泛，易于应用
链接：

还有其他关于如何使用同位素的例子<代码>链接：

---

使用此选项时，搜索引擎将停止工作：（刚刚尝试了这个和转换延迟-两者都不起作用。我相信这与我编写的javascript搜索引擎有关。编辑：我没有编写它，我是从堆栈溢出中获取的。下面是完整的代码-它不能在JSFIDLE中运行，因为我的文件是本地的，但至少你可以看看完整的代码-我认为它可以工作ed终于来了。我更新了JSFIDLE，请检查！这真的很棒！我会想办法在只显示一个结果时让它“不刷新”。非常感谢！！！感谢这个解决方案，但我会坚持使用@Α.papadakis提供的解决方案。事实上，我也测试了同位素-很好！我将使用它：）

$(document).ready(function(){
  $("#searchField").on("keyup", function() {
    var value = $(this).val().toLowerCase();
      $(".employee").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});