javascript - 重叠 jquery mouseover 事件

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());
});

这是演示
当您在两个元素之间快速交换时，li 元素的行为很奇怪。
问题是什么？

Answer 1

您可以尝试去抖动/限制事件。 http://benalman.com/projects/jquery-throttle-debounce-plugin/

如果您有正在运行的动画，请在 mouseleave 事件上使用 .stop() 来中断动画

Answer 2

当您多次在同一个元素上移动时，动画会排队。您必须使用.stopor停止动画.finish（稍后立即结束动画）：

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