2012-04-25 54 views
2

當我「removeClass('下')」,它刪除了css類,但當我再次單擊對象時,它執行相同的操作。jQuery的動畫和刪除類與addClass

我想通過刪除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'); 
}); 

回答

3

到那個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"); 
}); 
+0

這似乎工作。但是如果我添加Class('above')呢?併爲此做一個單獨的點擊功能?我如何使它可點擊? – Josh 2012-04-25 05:23:59

1

使用.off()

卸下類是不夠的,該事件已連接到該節點,所以你應該去除附在太事件。

DEMO

0

你可以選擇使用

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

剛剛解除綁定的情況下,當你刪除類。

$('#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"); 
});