jQuery 显示/隐藏 - 关于延迟变量的问题 [英] jQuery show/hide - Question about the delay variable

问题描述

当您将鼠标悬停在某个 div 上并设置了淡出延迟时，我正在使用以下代码显示一个框，但是如果用户回到该 div，是否有某种方法可以取消淡出效果?

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');
});

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 函数的工作.

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.

任何想法都会有所帮助，因为它对 jQuery 来说还是很新的！

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?

推荐答案

有一个非常不错的 jQuery 插件专门用于这种类型的鼠标进入/离开功能.

There's a very nice plugin written in jQuery specifically for this type of mouse enter / leave functionality.

它叫做 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)

fadeMenu 和 showMenu 将是你的 jQuery 函数来改变菜单的外观.

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 )

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

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');
}

这篇关于jQuery 显示/隐藏 - 关于延迟变量的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！