3
\$\begingroup\$

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?

\$\endgroup\$
  • 1
    \$\begingroup\$ 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? \$\endgroup\$ – James Khoury Oct 13 '11 at 1:34
  • \$\begingroup\$ 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. \$\endgroup\$ – ANeves Sep 19 '12 at 9:57
2
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.