jQuery animation procedural approach, suggestions need

Question

I'm kinda worried that the way I did my animation intro is a bit too heavy and is not optimized. Please review and let me know your thoughts.

$(document).ready(function() {
 introIconFirst();
 function introIconFirst() {
 $('h2.ribbon').css({
 'marginTop': '+30px',
 'opacity': '0'
 }).animate({
 marginTop: '0',
 opacity: '1'
 }, 1500, 'easeOutElastic', introIconSecond());
 }
 function introIconSecond() {
 $('#ico_website').rotate('0deg').css({
 'top': '+900px',
 'opacity': '0'
 }).animate({
 top: '50px',
 opacity: '1'
 }, {
 queue: false,
 duration: 1100,
 easing: 'easeOutElastic'
 }).animate({
 rotate: '-30deg'
 }, 1000, 'easeOutElastic', introIconThird());
 }
 function introIconThird() {
 $('#ico_rails').css({
 'top': '+900px',
 'opacity': '0'
 }).delay(300).animate({
 top: '145px',
 opacity: '1'
 }, 1400, 'easeOutElastic', introIconFourth());
 }
 function introIconFourth() {
 $('#ico_plane').css({
 'left': '255px',
 'top': '90px',
 'opacity': '0'
 }).delay(800).animate({
 top: '18px',
 left: '299px',
 opacity: '1'
 }, 600, 'linear');
 }
});

• Pennf0lio: @JoshSmith Thanks. I didn't know it before. Will do for future post.

Answer 1

Looks good, though I prefer to keep the $(document).ready() as clean as possible, by only making calls and not definitions. Makes DOM management a bit easier.

• Ken: No problem, I tend to be a bit too obsessive over things like that. Often times my doc readys' don't consist of more than a few lines.

Answer 2

Why the hell you need to declare your functions inside $(document).ready()? :)