jQuery 显示/隐藏 - 关于延迟变量的问题
当您将鼠标悬停在某个 div 上并设置淡出延迟时,我使用以下代码显示一个框,但是如果用户返回该 div,是否有某种方法可以取消淡出效果?
jQuery("#cart-box").hover(function()
{
jQuery("#cart-container").fadeIn('fast');
}, function( )
{
jQuery("#cart-container").delay(800).fadeOut('fast');
});
div 的代码
<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div>
考虑一下,我认为如果您离开 div 并返回,我可能需要停止 fadeIn 函数的工作。
任何想法都会有所帮助,因为对 jQuery 来说仍然很陌生!
顺便说一句,我应该使用什么效果来让框从无内容扩展到内容的高度,而不是仅仅淡入?
I'm using the following code to show a box when you mouseover a certain div and have set the delay on the fade out but is there some way of cancelling the fadeOut effect if the user goes back on to the div?
jQuery("#cart-box").hover(function()
{
jQuery("#cart-container").fadeIn('fast');
}, function( )
{
jQuery("#cart-container").delay(800).fadeOut('fast');
});
Code for the divs
<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div>
Thinking about it I think it's probably a case me needing to stop the fadeIn function working if you go away from the div and go back.
Any thoughts would be helpful as still very new to jQuery!
On a side note what effect should I use to have the box expand from nothing to the height of the content instead of just fading in?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有一个非常好的用 jQuery 编写的插件,专门用于这种类型的鼠标进入/离开功能。
它被称为 hoverIntent.js
它在执行下一个幻灯片操作之前创建一个可配置的延迟等,非常适合菜单交互。您还可以在每个到期事件上调用自己的函数。
默认用法的一个示例是:
其中 fadeMenu 和 showMenu 将是用于更改菜单外观的 jQuery 函数。
要创建您自己的延迟配置,您只需使用:
编辑:
对于您的示例,只要是显示隐藏 div 的触发器,那么您应该能够使用以下内容:
There's a very nice plugin written in jQuery specifically for this type of mouse enter / leave functionality.
It's called hoverIntent.js
It creates a configurable delay before performing the next slide action etc, great for menu interactions. You can also call your own functions on each of the expiry events.
An example of the default usage is:
Whereby fadeMenu and showMenu would be your jQuery functions to change the appearance of the menu.
To create your own configuration of the delay you simply use:
Edit:
For you example, so long as the is the trigger to show the hidden div then you should be able to use the following: