Return to Answer

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

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