Menu
I want to make animation for my search engine that I have but I have no idea how to do so.
I have this in my 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:[email protected]">[email protected]</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:[email protected]">[email protected]</a> <br> <b>Skype:</b> <a href="skype:john.d?userinfo">john.d</a>'><i hidden>John D Software Engineer</i>
</div>
</div>
</div>
The search engine itself is:
$(document).ready(function(){
$("#searchField").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".employee").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
It is working like a charm right now, but I want to add animation when all others disappear and when they appear again (something like fade in/fade out).
Current look:
693
asked Feb 03 '26 12:02
You could "play" with visibility and opacity. Add .show class in every employee. In every keyup event in the search field remove the class show from all employees and then add it only to the employees that are going to be shown. Also use a setTimeout function to achieve the fade effect. Check the updated jsfiddle bellow:
$(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>Here is what you are looking for. Isotope is widely use and easy to
link: https://codepen.io/desandro/pen/wfaGu
There are other examples on how to use Isotope. link:
https://isotope.metafizzy.co/filtering.html
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
