所以我正在制作一个菜单,当你把鼠标悬停在菜单按钮上时,它会显示各种div,但问题是当你把光标悬停在按钮上时事件会立即触发,这是我不希望的,因为如果你把鼠标滑到多个按钮上,它们会同时触发并显示/隐藏div容器(看起来很糟糕)。
我希望只有当用户将按钮悬停一定时间(如500ms)时才会触发事件,因为这样他们一次只能看到一个div容器。
这是我正在使用的代码,例如菜单按钮:
$(".menu-button").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".menu-container").delay(300).slideDown(800);
});
var myTimer = false;
$(".menu-button, .menu-container").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".menu-container").slideUp(500);
},100)
});
Fiddle:http://jsfiddle.net/1g0Lraec/5/
这让我发疯了,我希望有人能帮我!
谢谢:-)
您可以使用这个:
var upTimer = false ,
downTimer = false ,
isHover = false ;
$(".menu-button, .menu-container").hover(function(){
isHover = true;
clearTimeout(upTimer);
downTimer = setTimeout(function(){
if(isHover)
$(".menu-container").slideDown(500);
},500);
},function(){
isHover = false;
clearTimeout(downTimer);
upTimer = setTimeout(function(){
$(".menu-container").slideUp(500);
},100);
});
JSFIDDLE
这也会起作用:
var downTimer = false
$(".menu-button, .menu-container").hover(function(){
downTimer = setTimeout(function(){
$(".menu-container").slideDown(500);
},500);
},function(){
clearTimeout(downTimer);
$(".menu-container").slideUp(500);
});