jQuery animation procedural approach, suggestions need 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');
    }

});
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.