我正在写一张卡片 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 元素的行为很奇怪。
有什么问题？
最佳答案
当您多次移动同一元素时，动画会排队。您必须使用 .stop 或 .finish 停止动画(后者立即结束动画):
$('#cards-list li:nth-child('+nOnRight.toString()+')').stop().animate(...
关于javascript - 重叠jquery鼠标悬停事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14938603/