用户mouseenter
多次hover()时如何防止冒泡或“失控” 。当用户将鼠标悬停时,我将slideDown和slideUp用于mouseleave和delay设置为250。只有将delay设置为1 ms才能解决此问题。下面是我的脚本:
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
你可以在这里查看我的JsFiddle
重现问题
我认为您的问题是由is_opened
标志引起的,然后动画在改变left
css属性的同时运行
如果您更改鼠标,请输入并将js保留为以下内容
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
它应该工作:示例
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句