关于延迟变量的问题
我使用下面的代码来显示一个框,当你将鼠标悬停在一个特定的div上并且设置了淡出时的延迟,但是如果用户返回到div,是否有某种方法可以取消淡出效果?
jQuery("#cart-box").hover(function()
{
jQuery("#cart-container").fadeIn('fast');
}, function( )
{
jQuery("#cart-container").delay(800).fadeOut('fast');
});
代码为divs
<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非常有用!
在旁边注意我应该用什么样的效果让这个框从无到有地扩展到内容的高度而不是淡入?
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');
}
链接地址: http://www.djcxy.com/p/3639.html