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