jQuery:fadeIn、slideDown 或类似内容的延迟
昨晚我想知道如何延迟淡入或类似的东西。这不是我正在做的事情,我只是想知道。
例如,如果您有一个列表,其中包含可在悬停时激活工具提示的链接。如何让它“等待”直到悬停 1 秒?
我想这样做,这样当您将鼠标悬停在列表上时,工具提示就不会“闪烁”。如果你明白我的意思。
同样的事情也可以用在登录时。如果您看到 http://twitter.com/ (未登录)。如果顶部的登录框是通过悬停激活的,而不是单击,那么当您的光标离开登录框时,它会再次消失。是否可以设置一个“延迟”,以便您的光标可以离开登录框,然后再回来,而不会消失......?
简而言之:
- 当鼠标悬停在 x 秒后时,如何激活脚本?
- 如何设置隐藏由悬停激活的 div(未悬停时)的延迟?
- 是一样的事情,只是相反吗?
Last night I was wondering how it is possible to delay a fadeIn or something similar. It's not something I'm working on, I was just wondering.
If you have a list, with links that activates a tooltip on hover, for example. How do you make it "wait" until you have hovered for 1 second?
I want to do this, so the tool tips doesn't "flicker" when you hover along the list. If you understand what I mean.
The same thing could be used at logins. If you see http://twitter.com/ (not logged in). If the login box in the top, was activated with hover, and not click, it would disappear again if your cursor left the login box. Is it possible to set a "delay" so your cursor could leave the login box, and come back, without it disappearing...?
In short:
- How do you activate a script, when hover after x seconds?
- How do you set a delay for hiding a div (when not hovering) that was activated by hover?
- Is it the same thing, just in reverse?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有一个非常先进的悬停插件,它会等待您的鼠标减慢,然后再触发任意代码 - http://cherne.net/brian/resources/jquery.hoverIntent.html
或者,如果您不需要如此高级的东西...您可以简单地在 < 中触发动画code>setTimeout(),并在 mouseleave 时调用
clearTimeout()
另一种选择是不考虑延迟。如果您执行
.stop().fadeIn()
和.stop().fadeOut()
而不是简单的show()
和hide()
,你不会得到“闪烁”,而且效果看起来相当不错。(您可以查看
.delay()
来延迟与动画相关的代码 - 尽管这只会延迟动画,即使您在延迟完成之前移开 div。)There is a quite advanced hover plugin that waits for your mouse to slow down before triggering arbitrary code - http://cherne.net/brian/resources/jquery.hoverIntent.html
Alternatively, if you don't need something so advanced... you can simply trigger the animation in a
setTimeout()
, and on mouseleave callclearTimeout()
Yet another alternative, is to not bother with the delay. If you do a
.stop().fadeIn()
and a.stop().fadeOut()
rather than a simpleshow()
andhide()
, you won't get a "flicker" and the effect will look quite nice.(You can look at
.delay()
for delaying animation-related code - although this will only delay the animation, even if you move off the div before the delay finishes.)