Как сделать красивую фильтрацию элементов на jQuery или JS?

Question

Alexander @axrising

JavaScript

Как сделать красивую фильтрацию элементов на jQuery или JS?

Подскажите пожалуйста как можно сделать фильтрацию элементов на jQuery или JS с помощью fadeIn, fadeOut. Буду очень благодарен

Вопрос задан более трёх лет назад
118 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Alexander @axrising Автор вопроса

эта фильтрация реализована на slide up slide down, что не очень подходит, пробовал заменить на fadeIn-out, в итоге нарушил структуру фильтрации и некоторые вкладки вовсе не фильтрирует, и появилась задержка при удалении предыдущих фильтров

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Filtration</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h2>Фильтрация элементов с помощью jQuery</h2>
 
  <p>
  <button class="f-red">Фильтр красных элементов</button>
  <button class="f-blue">Фильтр синих элементов</button>
  <button class="f-green">Фильтр зеленых элементов</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="f-all">Все элементы</button>
  </p>
  
  <div class="red">Первый</div>
  <div class="red">Второй</div>
  <div class="blue">Третий</div>
  <div class="green">Четвертый</div>
  <div class="red">Пятый</div>
  <div class="blue">Шестой</div>
  <div class="blue">Седьмой</div>
  <div class="green">Восьмой</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

body {
  padding: 10%;
  font-family: sans-serif; }

button {
  padding: 1em;
  border: 0;
  margin: 0.25em;
  color: #fff;
  cursor: pointer; }

.f-red {
  background: #ff4136; }
  .f-red:hover {
    background: #e90d00; }

.f-green {
  background: #2ecc40; }
  .f-green:hover {
    background: #208e2c; }

.f-blue {
  background: #0074d9; }
  .f-blue:hover {
    background: #004b8c; }

.f-all {
  background: #333; }
  .f-all:hover {
    background: #0d0d0d; }

.red, .green, .blue {
  color: #fff;
  padding: 1em;
  margin-bottom: 0.25em; }

.red {
  background: #ff4136; }

.green {
  background: #2ecc40; }

.blue {
  background: #0074d9; }

var fActive = '';
 
function filterColor(color){
 if(fActive != color){
 $('div').filter('.'+color).fadeOut();
 $('div').filter(':not(.'+color+')').fadeIn();
 fActive = color;
 }
}
 
$('.f-red').click(function(){ filterColor('red'); });
$('.f-blue').click(function(){ filterColor('blue'); });
$('.f-green').click(function(){ filterColor('green'); });
 
$('.f-all').click(function(){
 $('div').fadeOut();
 fActive = 'all';
});

Написано более трёх лет назад

Тарас Шульга @AngryYumy

Александр Лисовский, это просто как пример, я веду к тому, что такое проще и быстрей найти в гугле, чем ждать пока вам кто-то, что-то ответит

Написано более трёх лет назад