# Animation of multiple text elements in sequence

I feel like this isn't the most effective nor efficient way of doing things:

line.stop(true, true).show('slide', {direction: whichway}, speed-150, function() {
sub.stop(true, true).show('slide', {direction: whichway}, speed-50, function() {
subtext.stop(true, true).show();
paragraph.stop(true, true).slideDown(speed);
});
});
});


whichway/speed are dynamic, but other than that it's all stuff that has to be in sync and queued up.

Is there a more efficient way of doing this?

• Apart from indentation/Style I don't think there is any other option short of putting it in your own queue ... and that would seem like overkill for this. Are you looking for style/readability recommendations? – James Khoury Oct 13 '11 at 1:34
• Is this code called more than once? If yes, you should be aware that you are re-creating the 3 callback functions whenever the code is called. Saving the functions into variables and delivering these variables as parameters would fix this; using when, as @LarryBattle suggested, also fixes this. – ANeves Sep 19 '12 at 9:57

For readability, take advantage of jQuery methods that use the jQuery Deferred object to eliminate your deeply nested callback structure. Example jQuery.when() can turn your code into this.

$.when({}).then(function(){ return line.stop(true, true).show('slide', {direction: whichway}, speed-150); }).then(function() { return title.stop(true, true).fadeIn(speed-200); }).then(function() { return sub.stop(true, true).show('slide', {direction: whichway}, speed-50 ); }).then(function() { subtext.stop(true, true).show(); return paragraph.stop(true, true).slideDown(speed); });  Here's another example of using$.when: http://jsfiddle.net/Tp569/

Code from demo.

CSS:

.box{
width: 10em;
height: 10em;
display:none;
}


HTML:

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>


JS:

$.when({}).then(function(){ return$("#box1").css("backgroundColor", "blue" )