jQuery show/hide - 关于延迟变量的问题

Question

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

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>

考虑一下我认为这可能是一个需要停止fadeIn功能的情况,如果你离开div并返回.

任何想法都会有用,因为jQuery仍然很新!

另外注意我应该使用什么样的效果让盒子从零开始扩展到内容的高度而不是只是淡入？

Answer 1

有一个非常好的用 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');
}