重叠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事件打破了动画