JQuery на логику события клика

Question

Я медленно преобразовываю этот код в jQuery, который я нашел в w3schools, и добавляю некоторые из моих собственных анимаций, но я не могу понять, где анимация может быть запущена.

Возможно, мой призыв к анимации не в том месте? Я пытаюсь воспроизводить анимацию каждый раз, когда вы нажимаете новую кнопку.

Я прокомментировал вызов функции animate, потому что она не работает при нажатии на другие кнопки.

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = $(".filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
      RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) 
      AddClass(x[i], "show"); 
      //animate();
  }
}

function animate() {
  $('.filterDiv').fadeTo('slow', 0.5);
}

function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn-navi");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.filterDiv {
  float:left;
  width: 30%;
  border: 1px solid lightgray;
  background-color: #e3e3e3;
  padding: 15px;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn-navi {
  font-size: 16px;
  border: 1px solid #ed1b2d;
  background-color: white;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

.btn-navi:hover {
  background-color: #ed1b2d;
  border: 1px solid #ed1b2d;
  color: white;
}

.btn-navi.active {
  border: 1px solid #ed1b2d;
  background-color: #ed1b2d;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="myBtnContainer">
  <button class="btn-navi active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn-navi" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn-navi" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn-navi" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn-navi" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>
</div>

Answer 1

Вы можете заменить функцию RemoveClass и AddClass пользовательской функцией анимации и передать элемент и значение затухания 0, чтобы скрыть, и любое другое значение больше 0, чтобы показать эффект.

Обновить функцию анимации до

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}

См. Демо ниже

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = $(".filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    animateIt(x[i], 0);
    //RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1)
      animateIt(x[i], 0.5);
    //AddClass(x[i], "show"); 

  }
}

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn-navi");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.filterDiv {
  float: left;
  width: 30%;
  border: 1px solid lightgray;
  background-color: #e3e3e3;
  padding: 15px;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn-navi {
  font-size: 16px;
  border: 1px solid #ed1b2d;
  background-color: white;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

.btn-navi:hover {
  background-color: #ed1b2d;
  border: 1px solid #ed1b2d;
  color: white;
}

.btn-navi.active {
  border: 1px solid #ed1b2d;
  background-color: #ed1b2d;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="myBtnContainer">
    <button class="btn-navi active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn-navi" onclick="filterSelection('cars')"> Cars</button>
    <button class="btn-navi" onclick="filterSelection('animals')"> Animals</button>
    <button class="btn-navi" onclick="filterSelection('fruits')"> Fruits</button>
    <button class="btn-navi" onclick="filterSelection('colors')"> Colors</button>
  </div>

  <div class="container">
    <div class="filterDiv cars">BMW</div>
    <div class="filterDiv colors fruits">Orange</div>
    <div class="filterDiv cars">Volvo</div>
    <div class="filterDiv colors">Red</div>
    <div class="filterDiv cars animals">Mustang</div>
    <div class="filterDiv colors">Blue</div>
    <div class="filterDiv animals">Cat</div>
    <div class="filterDiv animals">Dog</div>
    <div class="filterDiv fruits">Melon</div>
    <div class="filterDiv fruits animals">Kiwi</div>
    <div class="filterDiv fruits">Banana</div>
    <div class="filterDiv fruits">Lemon</div>
    <div class="filterDiv animals">Cow</div>
  </div>
</div>

Answer 2

Единственное другое место, где используется c, это строка

if (x[i].className.indexOf(c) > -1) 

Если значение c равно «all», это всегда следует вводить, и с помощью indexOf("") всегда будет возвращаться положительное число, поэтому оно всегда будет вводить if.

Это можно удалить, если у вас есть пример

if ((x[i].className.indexOf(c) > -1) || c == "all")