Transition when adding class

Question

How to apply Transition when adding and remove class on this scroll js below:

lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".header").removeClass("shrink");
    } else if(lastScroll - scroll > 0) {
        $(".header").addClass("shrink");
    } else {
        $(".header").removeClass("shrink");
    }
    lastScroll = scroll;
});

Trying to add this ({'transitionTime': 200}) when add and remove class.

Main Fiddle: http://jsfiddle.net/9fbr320y/1/
Example Here: Link >>

See this Example: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Hide-Sticky-Navbar-When-Scrolling-Down-Scroll-Up-Menu/ — Aariba, May 31 '15 at 18:53
possible duplicate of [jQuery.animate() with css class only, without explicit styles](http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles) — Amit, May 31 '15 at 19:01

score 0 · Answer 1 · answered May 31 '15 at 19:44

0

You need to define a transition property in the CSS applied to element (.nav):

.nav {
    transition: 0.2s;
}

Or in .darkHeader:

.darkHeader {
    transition: 0.2s;
}

I think that is better to apply this to original class (.nav).

FIDDLE: https://jsfiddle.net/lmgonzalves/9fbr320y/3/

answered May 31 '15 at 19:44

lmgonzalves

6,518
3
22
41

i'm trying to do this by jquery. – Aariba Jun 01 '15 at 03:57
Why you don't want to use CSS?, the transitions are much better than with jQuery. – lmgonzalves Jun 01 '15 at 12:42

Transition when adding class

1 Answers1