我想为我的搜索引擎制作动画，但我不知道该怎么做。
我的 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>
搜索引擎本身是:
$(document).ready(function(){
$("#searchField").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".employee").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
它现在就像一个魅力，但我想在所有其他消失和再次出现时添加动画(例如淡入/淡出)。
当前外观:
最佳答案
您可以“玩弄”可见性和不透明度。为每个员工添加 .show 类。在搜索字段中的每个 keyup 事件中，从所有员工中删除类 show ，然后仅将其添加到要显示的员工中。还可以使用setTimeout函数来实现淡入淡出效果。检查下面更新的 jsfiddle:
$(document).ready(function(){
$("#searchField").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".employee").removeClass("show");
setTimeout(function() {
$(".employee").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).addClass("show");
});
},300);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>emerchantpay - Company Roster</title>
<style type="text/css">
.employee {
visibility: hidden;
opacity: 0;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
transition: 0.5s all ease;
}
.employee.show {
visibility: visible;
opacity: 1;
}
.employee > div {
width: 200px;
height: 200px;
background: red;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<form class="form-inline mx-auto">
<button class="home btn btn-outline-success btn-margin-right active" type="button">Company Roster</button>
<button class="room btn btn-outline-success btn-margin-right" type="button">Room Location</button>
<button class="responsibilities btn btn-outline-success btn-margin-right" type="button">App Responsibilities</button>
<div class="input-group">
<input type="text" class="form-control col-8" placeholder="Search" aria-label="search" aria-describedby="btnGroupAddon" id="searchField">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon"><i class="material-icons">search</i></div>
</div>
</div>
</form>
<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 show">
<div>
</div>
<i hidden>J Doe Team Leader Integration Services</i>
</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show ">
<div>
</div> <i hidden>J Doe Team Leader Integration Services</i>
</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
<div>
</div> <i hidden>J Doe Team Leader Integration Services</i>
</div>
</div>
<div class="row mb-2">
<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
<div>
</div>
</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
<div>
</div>
</div>
<div class="col-lg-1 col-md-2 col-sm-3 col-6 employee show">
<div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>关于javascript - 如何制作滤镜/切换效果的动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54275104/