Animate addClass and removeClass in Jquery

Question

I Have a simple code that removes a class when a div is clicked. What i am looking for is that rather than just showing when the div is clicked, can I make it slide in from left to right?

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 140) {
    $('#primary-menu-container').addClass("hide-nav-fixed");
  } else {
    $('#primary-menu-container').removeClass("hide-nav-fixed");
  }
});

Possible duplicate of [animating addClass/removeClass with jquery](https://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery) — Aref Ben Lazrek, Sep 21 '17 at 12:49

score 1 · Answer 1 · edited Apr 19 '21 at 20:24

If you use jQueryUI, simply add arguments to your add/removeClass functions like this:

.addClass('class-name', time-in-milliseconds, 'effect');

Results with a Swing effect for 1 second:

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 140) {
        $('#primary-menu-container').addClass('hide-nav-fixed', 1000, 'swing');
    } 
    else {
        $('#primary-menu-container').removeClass('hide-nav-fixed', 1000, 'swing');
    }
});

Here is the documentation for (addClass/removeClass):

addClass() http://api.jqueryui.com/addclass/
removeClass() http://api.jqueryui.com/removeclass/

Worth mentioning that your solution depends on `jQuery UI`. `jQuery` out of the box doesn't support animation — Fr0zenFyr, Nov 14 '18 at 08:57

score 0 · Answer 2 · answered Sep 21 '17 at 11:56

Just make another class called 'slide-left'

.slide-left{
    margin-left:-500px;
    transition:margin-left 500ms;
}

And add it like you are doing with the other classes. Then, after 500ms you can hide it.

Edit: you can move the div any way you want following the same strategy. And depending on the current css attributes of the div, other attributes would be more appropiate to make the animation

score 0 · Answer 3 · answered Sep 21 '17 at 11:57

Would this be what you are looking for:

Animate.css

Collection of simple CSS animations you can attach to html elements. See how the author linked the animations in the demo when you press a button and do the same before you remove the item (set long enough timer before you actually remove item). When adding you simply add an animation class as well.

Plenty of animations seem suitable for entry removal from the list

You can always make animations yourself but why waste time, these are battle tested and work. If you don't wanna the whole pack make your own by removing everything you don't need?

score 0 · Answer 4 · answered Sep 21 '17 at 12:03

0

Without CSS3 (not compatible for very old browsers versions) you can use the jquery animate function, after adding class :

$('#primary-menu-container').animate({"left":"0px"}, "slow");

answered Sep 21 '17 at 12:03

GGO

2,678
4
20
42

Animate addClass and removeClass in Jquery

4 Answers4