Как добавить fadein в jQuery?

Question

[mxbeat]

Доброго времени суток! Подскажите, есть маленький скрипт, который добавляет класс .fixed к меню, чтобы оно прилипало при прокрутке, как правильно прописать fadein и fadeout, чтобы это происходило с анимацией?

Скрипт: https://codepen.io/maxbeat/pen/KKpNvwY

$(document).ready(function($){
    var navPos, navHeight;
    function refreshVar() {
      navPos = $('.menu').offset().top; // определяем положение блока меню
      navHeight = $('.menu').outerHeight(true); // определяем высоту меню
    }
    refreshVar();
    $(window).resize(refreshVar);
      $('<div class="clone-menu"></div>').insertBefore('.menu').css('height', navHeight).hide(); // вставляем перед меню блок с такой же высотой и прячем его
    $(window).scroll(function() {
      if ($(window).scrollTop() > 300) { // при прокрутке больше 300px
        $('.menu').addClass('fixed');  // добавляем меню класс .fixed
        $('.clone-menu').show(); // отображаем клон блока меню
      }  
      else {
        $('.menu').removeClass('fixed');
        $('.clone-menu').hide();
      }
    });
    });

Answer 1

[Никита]

Лучше добавьте в класс fixed анимацию. Или добавьте второй класс с анимацией. (Анимация css это @keyframes :)

А вообще вместо show и hide добавляете fadein и fadeout

Comments

[mxbeat]

show и hide там применяется к другому блоку, а не к меню

[Никита]

mxbeat, ну так создайте другой класс