.on（）.off（）或.one（）邏輯停止重複點擊列表項

Question

我創建了一個JSFiddles。

我想刪除重複點擊，因爲點擊會創建一個動畫。

我現在明白$(this).off('click');會做的;然而，

我遇到問題的地方是如何在點擊任何新的listitem之後打開.on()點擊。

還指出，.one()似乎是一個很好的解決方案;然而，我不確定如何使用這個，同時保持我的相同的語義。謝謝。

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> 

Answer 1

我已經分叉你的小提琴： http://jsfiddle.net/5A6Xn/

使用ON））的組合（和關閉（你可以修改類屬性來實現結果：

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

bindClick(); 

function bindClick() 
{ 
    $(".carousel_item:not(.selected)").on("click", function(event) 
    { 
     $(".carousel_item").off("click"); 
     $('.carousel_item').removeClass("selected");  
     $(this).addClass("selected"); 
     $(sideitems).stop(true, true).animate({ 
      right: '4.5em' 
     }); 
     $(sideitems).hide(); 

     fadeItem(); 

     bindClick(); 
    }); 
} 

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

    }, 
    mouseleave: function() { 

    } 
}); 

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

Answer 2

如何檢查元素被動畫（$(el).is(':animated')），然後除去點擊像這樣：

$(elementClickedOn).click(function(e) {e.preventDefault();});