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