在 Jquery 中动画 addClass 和 removeClass

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");
  }
});

Answer 1

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/

Answer 2

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

Answer 3

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?

Answer 4

如果没有 CSS3（与非常旧的浏览器版本不兼容），您可以在添加类后使用 jquery 动画功能：

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