开发者

jQuery: Delay of fadeIn, slideDown or something similar

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开发者_C百科 thing, just in reverse?


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 call clearTimeout()

Yet another alternative, is to not bother with the delay. If you do a .stop().fadeIn() and a .stop().fadeOut() rather than a simple show() and hide(), 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.)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜