jquery：在效果之前添加延迟

发布于 2024-12-16 10:43:40 字数 274 浏览 1 评论 0原文

我的网站上有浮动框。我在 mouseenter 上显示它并在 mouseleave 上隐藏它。像这样：

$(box).mouseenter(function(evt) {showBox();});

当

$(what).parent().mouseleave(function(evt) {hideBox();});

我将鼠标快速移动到“框”上时，它就会显示出来。这种情况下怎么不显示呢？谢谢。

原文

I have floating box on my site. I show it on mousenter and hide onmouseleave. Like this:

$(box).mouseenter(function(evt) {showBox();});

and

$(what).parent().mouseleave(function(evt) {hideBox();});

When I perform quick mouse move over the "box" it shows up.
How not to show it in that case?
Thanks.

分享到QQ

分享到微博

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

发布评论

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

伴我老 2024-12-23 10:43:40

var showTimer;

$( box ).hover( function(){
    // wait .5 sec to show the box
    showTimer = setTimeout( showBox, 500 );

}, function(){
    // wipe timer so that showBox isn't called if < .5 sec
    if( showTimer ){
        clearTimeout( showTimer );
        showTimer = null;
    }

    hideBox();
}

var showTimer;

$( box ).hover( function(){
    // wait .5 sec to show the box
    showTimer = setTimeout( showBox, 500 );

}, function(){
    // wipe timer so that showBox isn't called if < .5 sec
    if( showTimer ){
        clearTimeout( showTimer );
        showTimer = null;
    }

    hideBox();
}

回复收藏 0 原文

夜雨飘雪 2024-12-23 10:43:40

我发现 bindWithDelay 插件对于此类场景非常有用。

编写如下内容非常容易：

$(box).bindWithDelay("mouseenter", function() { ... }, 500);

这会在事件触发之前增加 500 毫秒的延迟。当事件多次触发时，它处理必须设置/取消/重置计时器的所有管道。

（它还支持一个方便的节流选项，适用于更复杂的情况，您可以在链接中阅读有关内容）

I found the bindWithDelay plugin very useful for these kinds of scenarios.

It's vey easy to write something like:

$(box).bindWithDelay("mouseenter", function() { ... }, 500);

This adds a 500ms delay before the event fires. It handles all the plumbing of having to set/cancel/reset timers when the event fires multiple times.

(It also supports a handy throttling option for more complicated situations that you can read about in the link)

回复收藏 0 原文

云巢 2024-12-23 10:43:40

使用 setTimeout() 包装函数调用，

$(box).mouseenter(function(evt) { setTimeout("showBox()",1000);});

其中 1000 表示 1 秒。（1000 毫秒 = 1 秒）

编辑：

这可能比我想象的要复杂一点。如果鼠标快速移出，您必须防止它显示。

var t;
$(box).mouseenter(function(evt) { t = setTimeout("showBox()",1000);});
$(box).mouseleave(function(evt) { clearTimeout(t); });
$(what).parent().mouseleave(function(evt) {clearTimeout(t);hideBox();});
function showBox(){
    clearTimeout(t);
    // the rest or your function
}

Wrap your function call with setTimeout()

$(box).mouseenter(function(evt) { setTimeout("showBox()",1000);});

where 1000 is 1 sec. (1000 milisecond = 1sec)

Edit:

This might be a little more complicated then I thought. You have to prevent it from ever showing if mouse out quickly too.

var t;
$(box).mouseenter(function(evt) { t = setTimeout("showBox()",1000);});
$(box).mouseleave(function(evt) { clearTimeout(t); });
$(what).parent().mouseleave(function(evt) {clearTimeout(t);hideBox();});
function showBox(){
    clearTimeout(t);
    // the rest or your function
}

回复收藏 0 原文

~没有更多了~