Animation of multiple text elements in sequence

Question

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() {
 title.stop(true, true).fadeIn(speed-200, 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?

• James Khoury: 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?
• ANeves: 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.

Answer 1

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" )
 .fadeIn( "slow" ).delay(500).animate({
 opacity: 0.5,
 margin: '50'
 }, "slow").delay(1000);
}).then(function() {
 return $("#box2").css("backgroundColor", "yellow" ).fadeIn( "fast" );
});

For speed, try out animate.css, which is a pure css 3 base animation library. If that's not enough then read this