jquery 动画和带有 addClass 的removeClass

Question

当我“removeClass('below')”时，它会删除 css 类，但是当我再次单击该对象时，它会执行相同的操作。

我试图通过删除 CSS 代码来消除单击功能的工作能力。我做错了什么？

$('.below').click(function() {
    $(this).removeClass('below');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

我的 html 看起来与此类似:

<div id="welcome_item" class="below">
    stuff
</div>

请帮忙解决一下，谢谢。

如果我想在更改类后重新绑定(bind)点击怎么办？

$('.below').click(function() {
    $(this).unbind('click').removeClass('below').addClass('above');
    $('#welcome').removeClass('fadeInLeft bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

$('.above').click(function() {
    $(this).removeClass('above').addClass('below');
    $('#welcome_search').animate({"top": "+=140px"},"slow");
    $('#welcome').removeClass('fadeInLeft bounceOutLeft fadeOutLeft').delay('500').addClass('fadeInLeft');
});

Answer 1

当 jQuery 代码运行时，click 事件已经绑定(bind)到类 .below 的元素，并且每次单击该元素时，jQuery 都不会实际上不再检查元素的类，因此删除类对您没有帮助。

您可以使用取消绑定(bind)来代替

http://api.jquery.com/unbind/

$('.below').click(function() {
    $(this).unbind('click');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});