HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Animation of multiple text elements in sequence

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
animationelementstextsequencemultiple

Problem

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?

Solution

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:

Box 1
Box 2


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

Code Snippets

$.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);
});
.box{
    width: 10em;
    height: 10em;
    display:none;
}
<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
$.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" );
});

Context

StackExchange Code Review Q#5309, answer score: 2

Revisions (0)

No revisions yet.