javascript - 重叠jquery鼠标悬停事件

Question

我正在写一张卡片 list 。
卡片列表中的 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(...