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/

如果你有动画，请在mouseleave事件上使用.stop（）来打破动画

重叠jquery mouseover事件

2 个答案: