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?

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