在鼠标悬停时保持滑动菜单打开 [英] Keeping a sliding menu open on mouseover
问题描述
我试图将使用内联Javascript加载的现有菜单系统转换为仅使用jQuery的新代码，效率更高。
我有一个单杠与翻转图像。我在包含整数值的页面中有一个隐藏字段。当一个页面被加载时，对应的菜单加载了图像的粘性版本，并且所有其他菜单项目在鼠标上交换图像进入&离开。它被加载了大量的内联Javascript和一个怪异的JavaScript文件，每次创建新网站时都很乏味。
我成功将这一切转换为jQuery，其中I也能够禁用点击粘性菜单项。现在，我可以简单地设置一些变量，并根据每个网站的设计轻松定制它。
运行良好...
现在出现了一个新问题。一个设计包含每个菜单图像下面的一组滑动抽屉。滑动动画由外部JS文件处理，而菜单抽屉本身每个都只是一个包含嵌套在容器DIV中的内容的DIV。
然后我写了一些简单的jQuery的东西，动画的DIV和幻灯片进出鼠标悬停的菜单图像。问题是，我似乎无法解决鼠标问题远离菜单图像并向下进入菜单抽屉而没有抽屉关闭。我明白为什么？......我离开的图像触发动画关闭抽屉，然后才能进入内部。如果我将悬停动画应用到抽屉容器，它只是在菜单下创建一个也触发动画的区域，我也不想那样做。这似乎正在变成jQuery更复杂的问题。所有这些都可以在内嵌Javascript中正常工作......您可以将鼠标从图像移动到相邻的打开的抽屉中，而不会触发将其关闭的功能......好像内嵌的鼠标输入取消了抽屉图片的鼠标离开。
有什么建议？
谢谢！
编辑：
我相信我通过使用.stop（true，false）从图像传递到抽屉时。这会在动画开始前停止。然后，在启动正常动画之前进入图像时也是如此......这具有停止通过离开抽屉并进入图像而触发的动画的效果，但是当正常地进入图像时也不做任何事情。更多测试，然后我会发布一些示例代码。
编辑＃2：
我使用stop（）和delay（）来控制动画，但是如果您可以更快速地将鼠标放入它，则可以冻结抽屉的开启打开它。安装150毫秒。但现在设置为300毫秒来夸大问题。
相关代码发布在这里...
jsfiddle .net / qPLVp / 8 /
编辑＃3：
<多亏了Neil，现在这个功能非常好。以更快的动画速度，鼠标超出菜单图像并进入抽屉的状况将保持最低。但是，如果发生这种情况，抽屉不会关闭，这比从鼠标下面关闭要好得多。
http://jsfiddle.net/elusien/PayFw/8/
编辑＃4：
再次感谢Neil，这是相同代码的更高效版本...
我修改了jsFiddle代码，使其工作。基本上，我已将一个数据对象附加到 #menu 元素中。当你打开这个抽屉时，对象是 {opening：true} 。当抽屉完全打开（动画完成）时，对象是 {opening：false} 。我在进入抽屉时检查这一点，如果它是假的，我停止动画。如果这是真的，我不会停止动画。
代码是：
function enter（event）{// mouseenter IMG
//移除图片滚动代码
$（'＃menu'）。data（{opening：true}）。stop （true，false）.animate（{
top：'0'，
opacity：1
}，{
duration：300 //减缓抽屉开启
$ b函数（）{$（this）.data（{opening：false}）;}
）;
};
function leave（event）{// mouseout IMG
//已删除图片滚动代码
$（'＃menu'）。delay（400）.animate（{
top：' - '+ $ ht +'px'，
opacity：0
}，{
duration：600
}）;
};
$ b $（'＃menu'）。hover（
function（）{// mouseenter Menu drawer
if（！$（this）.data（'opening'）） {
$（this）.stop（true，false）;
}
}，
function（）{//鼠标菜单抽屉
$（this）。延迟（400）.animate（{
top：' - '+ $ ht +'px'，
opacity：0
}，{
duration：600
} ）;
}
）;
现在可以正常工作。鉴于此，您可能需要重做一些延迟。
I'm trying to convert an existing menu system which is loaded with inline Javascript into new, more efficient, code using only jQuery.
I have a horizontal bar with rollover images. I have a hidden field in the page containing an integer value. When a page is loaded, the corresponding menu is loaded with a "sticky" version of the image and all other menu items swap images on mouse enter & leave. It was loaded with tons of inline Javascript and a monster Javascript file that was tedious to convert every time I created a new site.
I successfully converted this all to jQuery where I was also able to disable the click on the sticky menu item. Now I can simply set some variables and easily customize it per each site's design.
Working great...
Now comes a new issue. One design contains a bunch of sliding drawers under each menu image. The sliding animations are handled by an external JS file and the menu drawers themselves are each just a DIV containing the content nested inside a container DIV.
So then I wrote some simple stuff for jQuery that animates the DIV and slides it in and out on mouse hover for the menu images.
The problem is that I cannot seem to solve the problem of the mouse moving away from the menu image and down into the menu drawer without the drawer closing. I understand the "why?"... I am leaving the image which triggers the animation to close the drawer before I can get inside. If I apply the hover animations to the drawer container it simply creates a zone under the menu which also triggers the animation, and I don't want that either. It seems to be turning into a more complex problem with jQuery. All this was working fine with the inline Javascript... you could just move your mouse from the image into the adjacent open drawer without triggering the function to close it... as if the inline "mouse enter" for the drawer cancelled out the image's "mouse leave".
Any suggestions?
Thank-you!
EDIT:
I believe I solved this by using .stop(true, false) when passing from the image and into the drawer. This stops the animation dead before it even starts. Then the same when entering the image BEFORE initiating the normal animation... this has the effect of stopping the animation triggered by leaving the drawer and entering the image but also does nothing when just entering the image normally. More testing and then I'll post some sample code.
EDIT #2:
I have it working with "stop()" and "delay()" to control the animation but it's possible to freeze the opening of the drawer if you can get your mouse into it faster than it takes to open it. Installed with 150 ms. but right now set to 300 ms to exaggerate the problem.
Relevant code posted here...
jsfiddle.net/qPLVp/8/
EDIT #3:
Thanks to Neil, this is functioning very well now. With a quicker animation speed, the condition of a mouse overshooting the menu image and entering the drawer will be kept to a minimum. But if it happens to occur, the drawer will not close which is much better than it closing from under your mouse.
http://jsfiddle.net/elusien/PayFw/8/
EDIT #4:
Again thanks to Neil, this is a more efficient version of the same code...
I've modified your jsFiddle code to make it work. Basically I have attached a data object to your #menu element. When you are opening this drawer the object is {opening: true}. When the drawer is fully open (animation completed) the object is {opening: false}. I check this when you enter the drawer and if it is false, I stop the animation. If it is true I do NOT stop the animation.
The code is:
function enter(event) { // mouseenter IMG
// removed image rollover code
$('#menu').data({opening: true}).stop(true, false).animate({
top: '0',
opacity: 1
},{
duration: 300 // slow the opening of the drawer
},
function(){$(this).data({opening: false});}
);
};
function leave(event) { // mouseout IMG
// removed image rollover code
$('#menu').delay(400).animate({
top: '-'+$ht+'px',
opacity: 0
},{
duration: 600
});
};
$('#menu').hover(
function (){ // mouseenter Menu drawer
if (!$(this).data('opening')) {
$(this).stop(true, false);
}
},
function (){ // mouseout Menu drawer
$(this).delay(400).animate({
top: '-'+$ht+'px',
opacity: 0
},{
duration: 600
});
}
);
This now works fine. You might want to redo some of your "delay"s in light of this.
这篇关于在鼠标悬停时保持滑动菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
