Article
Comments
Evan Byrne
Nov 17 2008
You're welcome. I'm glad someone other than me has a use for this plugin! :-D
gregf
Nov 18 2008
Can use this on my project as well. Thanks.
Nov 19 2008
Hi,
Is there a minimum timeout, like there is with setTimeout()? Presumably there would have to be right?
strx
Nov 19 2008
why don't use
setTimeout(fn, 1000);
setTimeout(fn2, 4000);
?
Evan Byrne
Nov 19 2008
@Stephen: Yes, the minimum timeout should be exactly the same as with setTimout()
@strx: Yes you could use setTimeout, but it is much easier to read this:
$(this).delay(1000,function(){
// A bunch of code
// More...
// Even more
});
Than it is to read this:
setTimeout(function(){
// A bunch of code
// Something...
// Even more
},1000);
Also, I have found using pure setTimeout() is picky about infinite loops.
santiag0
Nov 19 2008
Brillant, thanks a lot!
Dec 15 2008
Perfect for making jquery wait before the next action. Pause() didn't work for me.
Jan 04 2009
Great work Evan! This is very comparable to prototype's delay method. It would still be ideal to have a way to 'cancel' these call backs. For instance I do this on drop down menus so that an accidental mouseout won't cause the menu to disappear.
For instance: on mouse out we set a time out for 500ms or so and store the call back in a variable.
On mouse over we check for the variable storing the timeout and set it to false if it exists thus canceling the effect.
I'm wondering if there would be a simple way to get this effect done the jQuery way by creating a singleton to store all of the requests created in the loop. Just some food for thought.
Evan Byrne
Jan 08 2009
Hey Jim, actually I've been working on a
purely CSS drop-down navigation menu and have been thinking about adding a delay with javascript when the user mouses out from the menu before it disappears. I think the best way to do this with jQuery would probably be to create a plugin to do it for you.
I will explore the idea of adding a way to 'cancel' callbacks in my jQuery delay plugin. That might require setting a timer ahead of time and then using it thus adding an additional step. A very interesting idea indeed.
Jeffrey
Feb 12 2009
love it ! Thanks for the incredible work.
KDoubleU
Feb 23 2009
This is probably what i'm looking for, but can't get it to work as i'm new to jQuery.
At least, that 'delayed' CSS-Menu you described is exactly what i need to set up, and i have no idea how to do it right, i'm afraid.
Maybe you can give me a hint, Evan?
I have written this code right here
$(document).ready(function(){ $("#dropline li").hover(function() { $("ul",$(this)).fadeIn(500); }, function() { $("ul",$(this)).fadeOut(500); }); });
which works quite fine so far, but i want the fadeOut to happen with a delay of 3 secs. and i am actually unable to get it running.
Can i use that script/plugin of yours for it, and if,.. how on earth?!
Would appreciate your help a lot!
Thanks in advance,
KDoubleU
Feb 28 2009
Very nice plugin. Simple functional good.
So glad I came across this as I was trying to figure out why I cannot find a delay() function in the jQuery documentation :)
Thanks.
Mar 06 2009
There is a jQuery pause plugin created here:
http://blog.mythin.net/projects/jquery.php
Which I have updated for jQuery 1.2, here:
http://code.doublerebel.com/jQuery/jquery.pause.dblrbl.js
It uses native animation queues and offers a queue-clearing function, a feature others have suggested.
Yes I know this really should be available with proper docs from the jQuery site, but time is money...
Evan Byrne
Mar 16 2009
I updated the plugin for jQuery 1.3.2 so download the new one!
Mar 29 2009
I can't seem to get this to work. I am fairly new to jQuery but know enough to make most plugins work.
Evan Byrne
Mar 29 2009
Cody, if you post you code I could help you
Cody
Mar 29 2009
Thanks Even, I was being stupid. I figured it out. but how would I use a variable name in place of the delay?
for example:
var time = "generates a random number)
$(this).delay(time, function(){...
this doesnt seem to work whether it is 'time' or time.
Evan Byrne
Mar 31 2009
Using a variable would be easy, just like any other JavaScript function:
var time = 1000; // One second
$(this).delay(time,function(){
// Code...
});
May 03 2009
Can't believe that jQuery still have no wait or delay in the core ? thank you for the plugin - it helps a lot.
KM
May 07 2009
i know this is more of a javascript question, but i was wondering if you could give me a clue on the easiest way to disable the delay in a certain scenario.
I'm using the delay to slideUp a previous menu item before I slide down the selected menu item, but if there is no item open, i want to disable the delay.
In theory this should be nothing more than an if/else statement with either a variable set (open/close) or the function is set to execute something different if any clicked button in the group has a class of selected. However I tried both of these options, and it seems not to work. I have a decent grasp on JS and the syntax seems right, but for some reason it will not differentiate. Any help is much appreciated...
Evan Byrne
May 08 2009
@KM: You can clear a timeout set with setTimeout(), just do this:
var mytimer = setTimeout(function,time); clearTimeout(mytimer);
You can read more about this here.
Hope that helps!
Bobby
May 11 2009
worked a treat. thanks heaps!
May 29 2009
Thanks for your very useful plugin. I use it on almost all website I developed.
I hope you don't mind, but I wrote an article about your plugin on my blog (in french of course ;) ).
Evan Byrne
May 29 2009
@arnaud-k, of coarse I don't mind if you post an article about my plugin and I'm glad you find it useful!
Jun 02 2009
Thanks for this plugin, though it doesn't work yet. I'm quite new to jQuery. I have made a little dropdown menu which you can see here. A nested menu will come out on the parts BBF, Tanzania and Partners. I want the 'closing' of these menus to have a delay. The FadeTo-trick didn't work in IE, so I would really like to use your little function :-) The thing is, I don't know how to put it in here:
$(".parentnestedmenu").hover(
function () {
$(this).find('ul').stop(true, true).slideDown(500);
},
function () {
$(this).find('ul').slideUp(500);
}
);
Thank you
KevinK
Jun 02 2009
Hope this works better:
$(".parentnestedmenu").hover(
function () {
$(this).find('ul').stop(true, true).slideDown(500);
},
function () {
$(this).find('ul').slideUp(500);
}
);
KevinK
Jun 02 2009
I'm sorry for the slashes :-)
KevinK
Jun 02 2009
Oh btw, it has to delay the .slideUp (so the second part of the hover function)
Evan Byrne
Jun 02 2009
Kevin, try something like this:
var menu = {count:0};
$(".parentnestedmenu").hover(
function()
{
$(this).find('ul').stop(true,true).slideDown(500);
menu.count += 1;
},
function()
{
var tmp = menu.count;
$(this).delay(500,function(tmp)
{
if(tmp == menu.count)
{
$(this).find('ul').slideUp(500);
}
}
}
);
Not sure if that'll work because I haven't tried it out... so use at your own risk! :-)
KevinK
Jun 03 2009
Hey Evan,
Thanks so much for your time. Unfortunately, Dreamweaver shows an error and it doesn't work :-(
Could you maybe explain what you did with the menu counting? Why do you use those variables and that if-statement?
The thing is, I only want a delay for the .slideUp part. In Chrome and FF, this worked perfectly:
$(".parentnestedmenu").hover(
function () {
$(this).find('ul').stop(true, true).slideDown(500);
},
function () {
$(this).find('ul').fadeTo(5000,1).slideUp(500);
}
);
But in IE text looses its ClearType rendering and links can't be selected. If you go to the same page, you will see that I've uploaded the script that is in this comment. This is the way I want it to be :-) Could you maybe re-type your piece of code for me? Would really appreciate it! :-)
snoutz
Jun 08 2009
Thank u very..very much ... i'm very dizzy while i work on to combine datatables plugin and ajaxcontent plugin to make footer for total summary result, cause it's data could renew..but i found with little delaying..it will works fine ..thanks again
Nick
Jun 12 2009
Thank You! I'm using this on every page of the site I'm building. Now I can create complex flash-like animations.
Jul 10 2009
Thanks ! just spend to achieve the last 3 hours what your plugin fixed in minutes !
Jul 22 2009
Thanks a lot. This plugin helped me. I implement this in between $.getJSON function.
Jason
Sep 23 2009
Hi,
Simple but sweet plugin. Done the job perfectly, thanks! :)
Jason
Nick
Oct 16 2009
Hi,
I wonder if you can help. I would like to implement your plugin into a multi column menu menu I have created. I have this Jquery code that works really well but I am unsure where I would put the delay. I would like a 1 sec delay before the menu fades in when the user rolls over the button.
$("#menu li a").hover(function(){
$(this).parent().find("div.subnav").fadeIn(200);
$(this).parent().hover(function() {
}, function() {
// On hovering out slide subnav menus fade out
$(this).parent().find("div.subnav").fadeOut(200);
})
});
Many thanks in advance,
Nick.
Evan Byrne
Oct 16 2009
Try this:
$("#menu li a").hover(function(){
$(this).delay(1000,function(){
$(this).parent().find("div.subnav").fadeIn(200);
$(this).parent().hover(function() {
});
}, function() {
// On hovering out slide subnav menus fade out
$(this).parent().find("div.subnav").fadeOut(200);
})
});
Lucia
Oct 20 2009
Evan this plugin really helped me. I am not an experienced programmer but I got it to work. Thanks =)
Nick
Oct 21 2009
Thanks for the help Evan I really appreciate it, unfortunately the code you suggested did not work. I have also tried adding the delay this way
$(this).parent().find("div.subnav").delay(1000).fadeIn(200);
but this hasn't worked. All the Jquery is linked correctly am I missing something obvious?
Thanks,
Nick.
Evan Byrne
Oct 21 2009
I'm sorry Nick, I goofed up the code in my reply to you. Try this:
$("#menu li a").hover(function(){
// Not sure what this is for...
$(this).parent().find("div.subnav").fadeIn(200);
$(this).parent().hover(function(){
// On hover in do nothing
},function(){
// Delay hover out effect
$(this).delay(1000,function(){
// On hovering out slide subnav menus fade out
$(this).parent().find("div.subnav").fadeOut(200);
});
});
});
I'm not 100% sure this is what you are looking for...
Nick
Oct 22 2009
Hi Evan,
Once again thanks for your help. Unfortunately the code did not work. I have put an example of what I am trying to achieve at www.nicklansdell.com/evan this is an early draft of an ecommerce website. I have created a mega menu for the primary nav which works with fine with standard fades and pure css if JS is disabled.
What I would like to do is delay the activation and deactivation of the menu slightly to improve its usability. At the moment as you roll across the menu quickly the effect is somewhat distracting.
I hope this makes sense and thanks again for your patience.
Nick.
Jan 19 2010
Hola! estoy desarrollando una web y este plug-in es increíblemente util!
Hi there, I'am developing a website and I use this plug-in, is very nice!!
Gabe
Nov 17 2008
THANK YOU! I love jQuery, but have always struggled with getting a proper delay, I can't wait to start using this plugin.