Вы можете «играть» с прозрачностью и прозрачностью. Добавьте класс .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>
Они отличаются, потому что значение i
и в выражении генератора и в аккомпанементе списка оценены лениво, т.е. когда анонимные функции вызываются в f
.
К тому времени, i
связывается с последним значением если t
, который является-1.
Так в основном это - то, что понимание списка делает (аналогично для genexp):
x = []
i = 1 # 1. from t
x.append(lambda: i)
i = -1 # 2. from t
x.append(lambda: i)
Теперь лямбды несут вокруг закрытия, на которое это ссылается i
, но i
связывается с-1 в обоих случаях, потому что это - последнее значение, которому это было присвоено.
Если Вы хотите удостовериться, что лямбда получает текущее значение i
, сделать
f(*[lambda u=i: u for i in t])
Таким образом, Вы вызываете оценку i
в то время, когда закрытие создается.
Править: Существует одно различие между выражениями генератора и пониманиями списка: последняя утечка переменная цикла в окружающий объем.
Лямбда получает переменные, не значения, следовательно код
lambda : i
будет всегда возвращать значение, с которым я в настоящее время связываюсь в закрытии. К тому времени, когда это называют, это значение было установлено к-1.
Для получения, что Вы хотите необходимо будет получить фактическую привязку в то время, когда лямбда создается:
>>> f(*(lambda i=i: i for i in t)) # -> [-1, -1]
[1, -1]
>>> f(*[lambda i=i: i for i in t]) # -> [-1, -1]
[1, -1]
Выражение f = lambda: i
эквивалентно:
def f():
return i
Выражение g = lambda i=i: i
эквивалентно:
def g(i=i):
return i
i
свободная переменная в первом случае, и она связывается с параметром функции во втором случае, т.е. это - локальная переменная в этом случае. Значения для параметров по умолчанию оценены во время функционального определения.
Выражение генератора является ближайшим объемом включения (где i
определяется) для i
имя в lambda
выражение, поэтому i
разрешен в том блоке:
f(*(lambda: i for i in (1, -1)) # -> [-1, -1]
i
локальная переменная lambda i: ...
блок, поэтому объект, к которому это относится, определяется в том блоке:
f(*map(lambda i: lambda: i, (1,-1))) # -> [1, -1]