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

Question

当您将鼠标悬停在某个 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 来说仍然很陌生！

顺便说一句，我应该使用什么效果来让框从无内容扩展到内容的高度，而不是仅仅淡入？

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