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> 

、これを助けるあなたに感謝してください。

クラスを変更した後にクリックを再バインドしたい場合はどうすればよいですか？

$('.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イベントはすでにクラス.belowを持つ要素に結合され、毎回あなたが要素をクリックされ、jQueryのは、実際のクラスをチェックしませんクラスの削除はこれであなたを助けません。

あなたはunbind代わり

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

Answer 2

使用.off()クラスを削除

十分ではありません、イベントがノードに接続されているので、あなたもそれに接続されているイベントを削除する必要があります。

DEMO

Answer 3

あなたが代わりにあなたがクラスを削除するときだけ、イベントをバインド解除

$('.below').live("click",function(){}); 

Answer 4

を使用することができますを使用することができます。

$('#foo').unbind('click'); 

したがって、jsコードは次のようになります。

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