如何取消绑定和重新绑定（）点击动画？

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() { 

    } 



});