0

I want to add class (stycky-border) to element in my web site. Here is my jQuery code

`

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 20) {
            $('#masthead').addClass('sticky-border');

        }
        else {
            $('#masthead').removeClass('sticky-border');
        }
    });
});
`

How can i make this action slowly, with transition. How can I use css property "transition: 10s" with jQuery?

Thanks!

Miroslav Kostadinov
  • 35
  • 3
  • 1
    Possible duplicate of [animating addClass/removeClass with jQuery](https://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery) – 31piy Jul 19 '18 at 14:34

1 Answers1

0

Looks like the issue might be with your css. You need to define a property name that the transition is applying to, not just a duration.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

For instance, if you were looking to transition on opacity, you would do something like this: transition: opacity 10s

Also, you can only transition between two states (not things like display, etc.). Using the opacity example your code might look something like this:

#masthead {
  opacity: 0;
  transition: opacity 10s;
}

  // masthead with sticky-border
#masthead.sticky-border {
  opacity: 1;
}
onionalive
  • 1