Jquery延迟鼠标移出

发布于 2025-01-03 10:39:11 字数 511 浏览 1 评论 0原文

我有这个脚本：

$("#menu ul li").mouseover(
    function () {
        $(this).find(".submenu").fadeIn("slow");
    }
);

var timer = 0;
function animate_me() {
    $(this).find(".submenu").stop().fadeOut("slow");
}
$(function(){
    $("#menu ul li").mouseout(function(){
        timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in
    }, function() {
        clearTimeout(timer); // stop it if mouse is moved out
    });
});

如何延迟淡出直到菜单 ul li 被鼠标关闭两秒钟？

原文

I have this script:

$("#menu ul li").mouseover(
    function () {
        $(this).find(".submenu").fadeIn("slow");
    }
);

var timer = 0;
function animate_me() {
    $(this).find(".submenu").stop().fadeOut("slow");
}
$(function(){
    $("#menu ul li").mouseout(function(){
        timer = setTimeout("animate_me()", 300); // start timer when mouse is moved in
    }, function() {
        clearTimeout(timer); // stop it if mouse is moved out
    });
});

How do i delay the fadeout until menu ul li has been moused off for two seconds?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坏尐絯 2025-01-10 10:39:11

使用jQuery 的 HoverIntent 插件。它完全可以满足您的需求，甚至更多。

具体来说，超时功能提供了这种功能。用法示例：

function showIt() { $(this).find(".submenu").fadeIn("slow"); }
function hideIt() { $(this).find(".submenu").stop().fadeOut("slow"); }

$("#menu ul li").hoverIntent({
    over: showIt,
    out: hideIt,
    timeout: 300 /*ms*/
});

来自文档

超时：
调用“out”函数之前的简单延迟（以毫秒为单位）。
如果用户在超时之前将鼠标移回到该元素上
过期后，“out”函数将不会被调用（“over”函数也不会被调用）
函数被调用）。这主要是为了防止马虎/人为
暂时（无意中）采取的鼠标轨迹
用户离开目标元素...给他们时间返回。默认
超时：0

Use the HoverIntent plugin for jQuery. It does exactly what you need and more.

Specifically the timeout feature provides this capability. Example usage:

function showIt() { $(this).find(".submenu").fadeIn("slow"); }
function hideIt() { $(this).find(".submenu").stop().fadeOut("slow"); }

$("#menu ul li").hoverIntent({
    over: showIt,
    out: hideIt,
    timeout: 300 /*ms*/
});

From the documentation

timeout:
A simple delay, in milliseconds, before the "out" function is called.
If the user mouses back over the element before the timeout has
expired the "out" function will not be called (nor will the "over"
function be called). This is primarily to protect against sloppy/human
mousing trajectories that temporarily (and unintentionally) take the
user off of the target element... giving them time to return. Default
timeout: 0

回复收藏 0 原文