JQuery function linking unbound objects
I have of course searched SO for an answer to my "specific" question, but found nothing that allowed me to achieve my desired goal. Basically, I would like to be able to concatenate function calls with the ability to add a "delay" between those calls. I suppose it will need something along the line setTimeout()
. However, since these calls are asynchronous, I obviously cannot just concatenate them and hope for the result. I saw a link to the built-in jQuery function and the dequeue functions and figured that something might work on that. So far, I have not been able to come up with anything that comes close to my requirement.
I created a very simple example to demonstrate what I am trying to achieve, chaining here (btw - jsfiddle is a bit slower today):
http://jsfiddle.net/jimibt/wZeTT/
this uses nested setInterval calls, so is nasty and doesn't scale. My nirvana will be a jquery extension method which has the following syntax (the first parameter is a function, the second parameter is the delay of the setTimout value):
$().chain($('#strap1').fadeIn(1300), 500)
.chain($('#strap2').fadeIn(1300), 500)
.chain($('#strap3').fadeIn(1300), 500)
.start();
Now I know there is a delay () function in jquery, but this works (as far as I know) as part of a chain against a single selector and therefore cannot be used to combine multiple unrelated elements as per my example. I saw this related SO question CLOSED to what I was hoping for, but still didn't turn around the way I would like:
JQuery chained animations that affect different elements
Any thoughts?
source to share
You can use callbacks like this
$('#strap1').delay(500).fadeIn(1300,function(){
$('#strap2').delay(500).fadeIn(1300,function(){
$('#strap3').delay(500).fadeIn(1300);
});
});
Using [demo]
$('#strap1').delay(500).fadeIn(1300,function(){
$('#strap2').delay(500).fadeIn(1300,function(){
$('#strap3').delay(500).fadeIn(1300, function() {
$('#strapline').css({
'color': '#fff'
}).animate({
'color': color
}, 3000);
});
});
});
source to share