Как добавить анимацию затухания или затухания при выполнении addClass или removeClass при прокрутке

Question

Я в основном пытаюсь изменить классы bootstrap 4 navbar с помощью следующего jquery, когда есть прокрутка, но это, похоже, не работает

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".navbar")
      .removeClass("navbar-dark")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-light bg-light")
      .fadein("slow");
  } else {
    $(".navbar")
      .removeClass("navbar-light bg-light")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-dark")
      .fadein("slow");
  }
});

Answer 1

• Вам не нужно два класса. Только По умолчанию стили и специальный класс.
• Не используйте jQuery для анимации - используйте CSS3 и transition вместо
• Используйте jQuery .toggleClass() Method
• Кэшируйте ваш селектор Elements! Худшее, что вы можете сделать, это при каждом запросе прокрутки тикать весь DOM, чтобы go искать элемент / с .class - это слишком дорогая операция.

const $navbar = $('.navbar'); // Cache your elements!!

$(window).on('scroll', function() {
  const st = $(window).scrollTop();
  $navbar.toggleClass('is-scrolled', st >= 100);
});

body {
  margin: 0;
  height: 300vh; /* DEMO to force scrollbars */
}


/* DEFAULT STYLE */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  transition: 0.4s;
  background: gold;  
}

/* SCROLLED STYLE */
.navbar.is-scrolled { 
  background: #888;
}

<div class="navbar">NAVBAR</div>Scroll down...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

Функция .fadeOut() для jQuery имеет длительность и полный параметр. Параметр complete может быть функцией, которая вызывается всякий раз, когда затухание заканчивается. Таким образом, вы можете сделать что-то после завершения fadeOut, как и fadeIn, который вы хотите.

См. Пример ниже.

var $navbar = $(".navbar");
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 100) {
    $navbar
      .removeClass("navbar-dark")
      .stop(true, true)
      .fadeOut("fast", function() {
        $navbar
          .addClass("navbar-light bg-light")
          .fadeIn("slow");
      });
  } else {
    $navbar
      .removeClass("navbar-light bg-light")
      .stop(true, true)
      .fadeOut("fast", function() {
        $navbar
          .addClass("navbar-dark")
          .fadeIn("slow");
      });
  }
});

Но я бы рекомендовал по этой причине использовать CSS переходы, поскольку с ними гораздо проще работать и, что самое главное, более производительно, чем jQuery с постепенным увеличением и уменьшением.

Edit

Как и предположил Роко, вы следует использовать функцию .stop(), чтобы остановить любую текущую анимацию на элементе, где выполняется fadeIn или fadeOut.