[jQuery] Re: using setTimeout to apply fade-in effect to multiple divs in sequence
Thank you so much for the reply. I had figured it out but your way is
much more elegant. here's what I had done:
$(.box).hide();
var currentBox = $(#container :first-child);
fadeMyBoxes(currentBox);
function fadeMyBoxes(thisbox){
thisbox.fadeIn('slow');
if (thisbox.is(:last-child)){
clearTimeout(t);
}
else {
var t =setTimeout(
function(){fadeMyBoxes(thisbox.next());},50);
}
};
On Jan 10, 10:04 am, Balazs Endresz balazs.endr...@gmail.com wrote:
It can be done with setInterval too but doing it recursively withsetTimeoutis
a bit better:
var i=0, elements=$('.box'), length=elements.length;
functionfade(delay){
elements.eq(i++).fadeOut();
if(i=length)
setTimeout(arguments.callee, delay);
//arguments.callee is a reference to the current function
}
fade(500);
On Jan 10, 3:05 am, legofish pen...@gmail.com wrote:
Hi,
I have 20 divs all with the class .box on my page.
I want to apply the fadeIn() effect to all of them.
I dont want them to allfadein at the same time.
I want them tofade-in one by one, with a slight time offset.
I dont want to use callback functions, because I dont want to wait
until thefadeis completely finished on one div before fading the
next div. I want thefadeeffect on the next div to start a short time
after the effect on the previous one has started.
So I think I need to usesetTimeoutand some kind of a recursive
method, but I'm not very good with JS so I was hoping someone would
find this trivial and could help answer my question.
my thanks in advance.
[jQuery] Re: using setTimeout to apply fade-in effect to multiple divs in sequence
I've actually made a bit nicer abstraction as a jQuery plugin a while
ago, I think it's much more useful for such things, I almost forgot
about it: http://jsbin.com/unini/edit
This is how your code looks like with it:
$(#container :first-child).asyncEach(function(){
$(this).fadeIn('slow');
}, 500);
No global variables, can be reused on multiple elements, you can stop
it, add custom easing and there's a `complete` callback function too!
On Jan 13, 3:49 pm, legofish pen...@gmail.com wrote:
Thank you so much for the reply. I had figured it out but your way is
much more elegant. here's what I had done:
$(.box).hide();
var currentBox = $(#container :first-child);
fadeMyBoxes(currentBox);
function fadeMyBoxes(thisbox){
thisbox.fadeIn('slow');
if (thisbox.is(:last-child)){
clearTimeout(t);
}
else {
var t =setTimeout(
function(){fadeMyBoxes(thisbox.next());},50);
}
};
On Jan 10, 10:04 am, Balazs Endresz balazs.endr...@gmail.com wrote:
It can be done with setInterval too but doing it recursively
withsetTimeoutis a bit better:
var i=0, elements=$('.box'), length=elements.length;
functionfade(delay){
elements.eq(i++).fadeOut();
if(i=length)
setTimeout(arguments.callee, delay);
//arguments.callee is a reference to the current function
}
fade(500);
On Jan 10, 3:05 am, legofish pen...@gmail.com wrote:
Hi,
I have 20 divs all with the class .box on my page.
I want to apply the fadeIn() effect to all of them.
I dont want them to allfadein at the same time.
I want them tofade-in one by one, with a slight time offset.
I dont want to use callback functions, because I dont want to wait
until thefadeis completely finished on one div before fading the
next div. I want thefadeeffect on the next div to start a short time
after the effect on the previous one has started.
So I think I need to usesetTimeoutand some kind of a recursive
method, but I'm not very good with JS so I was hoping someone would
find this trivial and could help answer my question.
my thanks in advance.
[jQuery] Re: using setTimeout to apply fade-in effect to multiple divs in sequence
That's pretty useful Balazs, for some reason I couldn't get it to
worked though.
I saved your plugin bit that appears in that link in a file and named
it jquery.asynceach.js and linked it
to the page. Anyway, I'll play around with it a little more to see
where the problem is.
Thanks again
On Jan 13, 11:37 am, Balazs Endresz balazs.endr...@gmail.com wrote:
I've actually made a bit nicer abstraction as a jQuery plugin a while
ago, I think it's much more useful for such things, I almost forgot
about it:http://jsbin.com/unini/edit
This is how your code looks like with it:
$(#container :first-child).asyncEach(function(){
$(this).fadeIn('slow');
}, 500);
No global variables, can be reused onmultipleelements, you can stop
it, add custom easing and there's a `complete` callback function too!
On Jan 13, 3:49 pm, legofish pen...@gmail.com wrote:
Thank you so much for the reply. I had figured it out but your way is
much more elegant. here's what I had done:
$(.box).hide();
var currentBox = $(#container :first-child);
fadeMyBoxes(currentBox);
function fadeMyBoxes(thisbox){
thisbox.fadeIn('slow');
if (thisbox.is(:last-child)){
clearTimeout(t);
}
else {
var t =setTimeout(
function(){fadeMyBoxes(thisbox.next());},50);
}
};
On Jan 10, 10:04 am, Balazs Endresz balazs.endr...@gmail.com wrote:
It can be done with setInterval too but doing it recursively
withsetTimeoutis a bit better:
var i=0, elements=$('.box'), length=elements.length;
functionfade(delay){
elements.eq(i++).fadeOut();
if(i=length)
setTimeout(arguments.callee, delay);
//arguments.callee is a reference to the current function
}
fade(500);
On Jan 10, 3:05 am, legofish pen...@gmail.com wrote:
Hi,
I have 20 divs all with the class .box on my page.
I want to apply the fadeIn() effect to all of them.
I dont want them to allfadein at the same time.
I want them tofade-in one by one, with a slight time offset.
I dont want to use callback functions, because I dont want to wait
until thefadeis completely finished on one div before fading the
next div. I want thefadeeffect on the next div to start a short time
after the effect on the previous one has started.
So I think I need to usesetTimeoutand some kind of a recursive
method, but I'm not very good with JS so I was hoping someone would
find this trivial and could help answer my question.
my thanks in advance.
[jQuery] Re: Using setTimeout with a callback (callback appends function content)
Is there a better way to link animations in jQuery. Maybe I am going about this the wrong way. On Jan 18, 2:19 pm, WolfZombie [EMAIL PROTECTED] wrote: I'm not sure if my last reply went through. Here is a link to the file:http://www.cheesymovienight.com/test/slideshow/slide.php Clicking on the Play button at the bottom will start the slideshow. An alert Play is shown when the play function is called. An alert Set is shown when the callback function (which uses setTimeout) is called. On the first image each is called once, second image Play is called once and Set is called twice, and so on. Thanks again for any help. On Jan 18, 12:27 pm, Remy Sharp [EMAIL PROTECTED] wrote: Have you got a working link you can point us to? It's a little easier to debug when you've got working demo. Cheers.
[jQuery] Re: Using setTimeout with a callback (callback appends function content)
I'm not sure if my last reply went through. Here is a link to the file: http://www.cheesymovienight.com/test/slideshow/slide.php Clicking on the Play button at the bottom will start the slideshow. An alert Play is shown when the play function is called. An alert Set is shown when the callback function (which uses setTimeout) is called. On the first image each is called once, second image Play is called once and Set is called twice, and so on. Thanks again for any help. On Jan 18, 12:27 pm, Remy Sharp [EMAIL PROTECTED] wrote: Have you got a working link you can point us to? It's a little easier to debug when you've got working demo. Cheers.
[jQuery] Re: Using setTimeout with a callback (callback appends function content)
Here is a link. I have changed the code around a bit since I first posted, but mainly to remove the global $( declarations. http://www.cheesymovienight.com/test/slideshow/slide.php Clicking the play button at the bottom will start the slideshow and fire the alert messages that I was talking about above. This is the first time I've tried to create a custom callback. Thanks again for the help On Jan 18, 12:27 pm, Remy Sharp [EMAIL PROTECTED] wrote: Have you got a working link you can point us to? It's a little easier to debug when you've got working demo. Cheers.
[jQuery] Re: Using setTimeout with a callback (callback appends function content)
Have you got a working link you can point us to? It's a little easier to debug when you've got working demo. Cheers.
[jQuery] Re: Using setTimeout()
On 9/2/07, Michael Geary [EMAIL PROTECTED] wrote: Is that the wrong progression? Yes. You left out the setTimeout, which is never canceled. (And step 4 doesn't happen either - nobody cancels the ajaxStart - that function has already been called.) Assume the AJAX request takes 75 milliseconds. Then, the code in http://www.pastebin.ca/678318 goes like this: Great. Thanks for the explanation. Chris.
[jQuery] Re: Using setTimeout()
On 9/1/07, Michael Geary [EMAIL PROTECTED] wrote: Also, it looks like you have a race condition. What happens if the entire AJAX request completes in less than 100 milliseconds? I assumed that $.ajaxStart() would be canceled and $.ajaxStop() would execute. I looked over your code but I don't see how the flag (called active) changes anything. Would you explain? Thanks, Chris.
[jQuery] Re: Using setTimeout()
If ajaxStop is called before the setTimeout callback in ajaxStart is run, active will be false, so the addClass() on line 9 won't get executed. Without this, if ajaxStop ran before the setTimeout callback, the removeClass() would happen before the addClass(), so the class would never get removed. --Erik On 9/2/07, barophobia [EMAIL PROTECTED] wrote: On 9/1/07, Michael Geary [EMAIL PROTECTED] wrote: Also, it looks like you have a race condition. What happens if the entire AJAX request completes in less than 100 milliseconds? I assumed that $.ajaxStart() would be canceled and $.ajaxStop() would execute. I looked over your code but I don't see how the flag (called active) changes anything. Would you explain? Thanks, Chris.
[jQuery] Re: Using setTimeout()
From: Michael Geary
Also, it looks like you have a race condition. What
happens if the entire AJAX request completes in
less than 100 milliseconds?
http://www.pastebin.ca/678318
From: barophobia
I assumed that $.ajaxStart() would be canceled and
$.ajaxStop() would execute.
I looked over your code but I don't see how the flag
(called active) changes anything. Would you explain?
http://www.pastebin.ca/678388
From: Erik Beeson
If ajaxStop is called before the setTimeout callback in
ajaxStart is run, active will be false, so the addClass() on
line 9 won't get executed. Without this, if ajaxStop ran
before the setTimeout callback, the removeClass() would
happen before the addClass(), so the class would never
get removed.
Thanks for explaining it, Eric.
I can't resist a little code cleanup, so here is a better version:
http://www.pastebin.ca/679254
In this one, instead of setting a flag, the code clears the timer, a more
direct approach to things.
(In case you're wondering after reading the code, yes, it may call
clearTimeout(timer) when timer is null, and no, that's not an error.)
One other little improvement: The code sets $loading = $('#loading') at the
beginning and uses that instead of the var element = this business. And
finally, just for fun, I made the whole thing an execute-in-place anonymous
function.
-Mike
[jQuery] Re: Using setTimeout()
On 9/2/07, Erik Beeson [EMAIL PROTECTED] wrote: If ajaxStop is called before the setTimeout callback in ajaxStart is run, active will be false, so the addClass() on line 9 won't get executed. Without this, if ajaxStop ran before the setTimeout callback, the removeClass() would happen before the addClass(), so the class would never get removed. From: barophobia Why would ajaxStop ever be called before ajaxStart? 1. ajax request begins 2. ajaxStart() begins counting 3. ajax request ends before timeout period 4. ajaxStart() is canceled (addClass() never gets executed) 5. ajaxStop() starts and calls removeClass() 6. nothing is displayed Is that the wrong progression? Yes. You left out the setTimeout, which is never canceled. (And step 4 doesn't happen either - nobody cancels the ajaxStart - that function has already been called.) Assume the AJAX request takes 75 milliseconds. Then, the code in http://www.pastebin.ca/678318 goes like this: 0ms: ajax request begins 0-1ms: ajaxStart() runs and calls setTimeout() 75ms: ajaxStop() runs and calls removeClass() 100ms: setTimeout callback runs and calls addClass() See http://www.pastebin.ca/679254 for the latest and greatest version... :-) -Mike
[jQuery] Re: Using setTimeout()
From: barophobia I'm trying to delay the appearance of $.ajaxStart() using setTimeout() but I've been unable to get it to work. I've used it once before in something else and I'm basically just trying to copy that for $.ajaxStart(). http://www.pastebin.ca/678318 When I run that code I get t has no properties, jquery-1.1.4-compressed.js line 11. How do I do this properly? Inside your setTimeout callback function, this is not what you expect. Add var element = this; before the setTimeout, and then use $(element) instead of $(this) inside the function. Also, it looks like you have a race condition. What happens if the entire AJAX request completes in less than 100 milliseconds? I posted some untested code that should fix both of these: http://www.pastebin.ca/678388 On a related note, what would be really great is a delay option for $.ajaxStart() itself. My goal is simply to delay the appearance of the Loading... div until the ajax calls runs beyond a set time limit. Excellent idea! -Mike
