重疊jquery鼠標懸停事件

Question

我正在寫卡列表。
卡列表中的li元素既有mouseenter也有mouseleave事件。

mouseenterCard: function(index) { 
    var nOnRight = index+2; 
    var n = index+1; 

    if (n!=1) { 
     $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': '30px'}, 
                   "fast", 
                   function() { 

                   }); 
    } 
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': '30px'}, 
                    "fast"); 
}, 
mouseleaveCard: function(index) { 
    var nOnRight = index+2; 
    var n = index+1; 
    if (n!=1) { 
     $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': marginLeft.toString()+'px'}, 
                   "fast", 
                   function() { 

                   }); 
    } 
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': marginLeft.toString()+'px'}, 
                    "fast"); 
} 

$('#cards-list').on('mouseenter', 'li' ,function(e){ 
    CardList.getInstance().mouseenterCard($(this).index()); 
}); 

$('#cards-list').on('mouseleave', 'li' ,function(e){ 
    CardList.getInstance().mouseleaveCard($(this).index()); 
}); 

這裏是DEMO
正如你兩個元素之間交換快，li元素的行爲怪異。
問題是什麼？

Answer 1

多次移動相同元素時，動畫會排隊。您有一定.stop或.finish停止動畫（後者結束動畫即時）：

$('#cards-list li:nth-child('+nOnRight.toString()+')').stop().animate(... 

Answer 2

你可以試着去抖/節流事件。 http://benalman.com/projects/jquery-throttle-debounce-plugin/

如果你運行的動畫，使用.stop（）上MouseLeave事件打破了動畫