jQuery 显示/隐藏 - 关于延迟变量的问题

发布于 2024-10-04 03:40:31 字数 654 浏览 5 评论 0原文

当您将鼠标悬停在某个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

无远思近则忧 2024-10-11 03:40:31

有一个非常好的用 jQuery 编写的插件,专门用于这种类型的鼠标进入/离开功能。

它被称为 hoverIntent.js

它在执行下一个幻灯片操作之前创建一个可配置的延迟等,非常适合菜单交互。您还可以在每个到期事件上调用自己的函数。

默认用法的一个示例是:

$("#menu li").hover( showMenu, fadeMenu)

其中 fadeMenu 和 showMenu 将是用于更改菜单外观的 jQuery 函数。

要创建您自己的延迟配置,您只需使用:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#menu li").hoverIntent( config )

编辑:

对于您的示例,只要是显示隐藏 div 的触发器,那么您应该能够使用以下内容:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#cart-box a").hoverIntent( config );

function showMenu() {
    jQuery("#cart-container").fadeIn('fast');
}

function fadeMenu() {
    jQuery("#cart-container").fadeOut('fast');
}

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:

$("#menu li").hover( showMenu, fadeMenu)

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:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#menu li").hoverIntent( config )

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:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#cart-box a").hoverIntent( config );

function showMenu() {
    jQuery("#cart-container").fadeIn('fast');
}

function fadeMenu() {
    jQuery("#cart-container").fadeOut('fast');
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文