Question

我正在使用以下代码在鼠标悬停某个div时显示一个框并在淡出时设置了延迟，但是如果用户重新使用div，是否有某种方法可以取消fadeOut效果？ / p>

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

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

1 个答案: