如何取消綁定和重新綁定（）點擊動畫？

Question

我有一個簡單的動畫的遞歸循環。這些動畫由頁面加載控制.carousel_item控制。

LIVE SAMPLE JSFIDDLES CLICK HERE精簡爲簡單起見

問題：當重複點擊同一控制動畫將火一遍又一遍。我希望動畫只能按照carousel_item觸發一次。

UPDATE我想動畫只發射一次，每carousel_item。點擊以下carousel_item後重置。

示例：反覆按1會一遍又一遍地觸發動畫。我想第一次按動觸發動畫一次。 Next用戶mashes 2這將重新觸發動畫一次而不是重複。用戶仍然可以按1來進行糖化是我想要阻止的

從邏輯上看，我看到點擊解除綁定，點擊另一個.carousel_item，這是我的邏輯;不過，我敢肯定有一個更好的解決方案

var carItems = $('.carousel_item'); 
var sideitems = $('.side_item'); 
var x = false; 
$(sideitems).hide(); 
fadeItem(); 

$(carItems).on({ 
    click: function() { 

     $(sideitems).stop(true, true).animate({ 
      right: '4.5em' 
     }); 
     $(sideitems).hide(); 

     fadeItem(); 

    }, 
    mouseenter: function() { 

    }, 
    mouseleave: function() { 

    } 
}); 


function fadeItem() { 
    $('.side_ul li:hidden:first').fadeIn(fadeItem).animate({ 
     right: '-4.5em' 
    }, 150, function() {});; 
}​ 

HTML

<div id="carousel" class="flexslider"> 
     <ul class="slides"> 
     <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li> 
     <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li> 
     <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li> 
     <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li> 
     <!-- items mirrored twice, total of 12 --> 
     </ul> 
    </div> 

     <nav class="side_nav"> 
    <ul class="side_ul"> 
     <li class="side_item home"><div class="text_links"><a href="#">home</a></div></li> 
     <li class="side_item document"><div class="text_links"><a href="#">docs</a></div></li> 
     <li class="side_item video"><div class="text_links"><a href="#">video</a></div></li>   
     <li class="side_item programming"><div class="text_links"><a href="#">web</a></div></li> 

    </ul> 
    </nav> 

LIVE SAMPLE JSFIDDLES CLICK HERE

Answer 1

工作演示http://jsfiddle.net/ScbDG/2/

點擊事件後您可以使用.off; http://api.jquery.com/off/ & $(this)將確保將其設置爲off用於該特定對象。

良好讀取：Best way to remove an event handler in jQuery?

希望這有助於:)

代碼

$(carItems).on({ 
    click: function() { 

     $(sideitems).stop(true, true).animate({ 
      right: '4.5em' 
     }); 
     $(sideitems).hide(); 

     fadeItem(); 
     $(this).off('click'); 

    }, 
    mouseenter: function() { 

    }, 
    mouseleave: function() { 

    } 



});