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

Question

我正在使用下面的代码来显示一个框，当你鼠标悬停在特定的 div 上时，并设置了淡出延迟，但如果用户重新回到 div 上，有没有办法取消淡出效果呢？

jQuery("#cart-box").hover(function() 
{
    jQuery("#cart-container").fadeIn('fast');
}, function( )
{
    jQuery("#cart-container").delay(800).fadeOut('fast');
});

标签的代码

<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还很陌生，任何想法都会有所帮助！

另外，我应该使用什么效果来使框从无到有地扩展到内容的高度，而不仅仅是淡入呢？

- Vince P

Answer 1

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

它被称为hoverIntent.js

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

默认用法示例：

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

您可以使用jQuery函数fadeMenu和showMenu来改变菜单的外观。

要创建自己的延迟配置，只需使用：

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

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

编辑：

对于您的示例，只要＜a＞标签是显示隐藏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');
}

- Brian Scott

---

这听起来很理想，我该如何在那个配置中实现我的代码？ - Vince P

@Vince，实际上，我在这里留下了一个拼写错误。只需删除.delay(800)，因为延迟现在由插件处理。 - Brian Scott