jQuery addClass removeClass animation when div is display none

Question

Its possible to combine jQuery addClass with animation when the div is display:none ?

jQuery

 $(window).scroll(function() {
        $(this).scrollTop() > 100 ? $(".nav-current").addClass("hide") : $(".nav-current").removeClass("hide");
        $(this).scrollTop() > 100 ? $(".nav-affix").addClass("show") : $(".nav-affix").removeClass("show");
        $(this).scrollTop() > 50 ? $(".navbar").addClass("go-top navbar-fixed-top") : $(".navbar").removeClass("go-top navbar-fixed-top");
    });

CSS

.show {
    display: block;
}

.hide {
    display: none;
}

.nav-affix {
    display: none;
    > li {
        > a {
            font-size: 12px !important;
            transition: all 0.3s;
        }
    }
 }

Answer 1

Agree with fauxserious - you can use fadeIn and fadeOut jQuery functions to achieve your goal.

One more option is using width(1000) and height(1000) where argument (1000) is a duration in milliseconds, thus you could get some animation.

Let me know if you still have an issue.