jQuery函数在被调用之前运行

Question

我想要一个接一个地调用两个函数。第一个函数运行正常但第二个函数甚至在调用之前运行。有没有办法防止这种情况发生？第一个函数叫做scrollAnimation（），第二个函数叫做footerAnimation。谢谢！

$(document).ready(function() {
        $('#mainGraphic').css('visibility','hidden');

        (new TimelineLite({onComplete:scrollAnimation}))
                .from( $('#header'), 1, {css:{opacity:'0'}})
                .from( $('#fade-headerText'), .7, {css:{bottom:'1000px', opacity:'0'}, ease:Back.easeOut})
                .from( $('#boxQ'), .7, {delay: 1, css:{opacity:'0'}})
                .from( $('#boxS'), .7, {css:{opacity:'0'}})
                .from( $('#boxSim'), .7, {css:{opacity:'0'}})

                function scrollAnimation() {
                    $('#mainGraphic').css('visibility','visible');

                    var controller = $.superscrollorama();


                    controller.addTween('#graphicOne', TweenMax.from( $('#graphicOne'), 1, {css:{right:'1000px', opacity:'0'}, ease:Back.easeOut}));
                    controller.addTween('#graphicTwo', TweenMax.from( $('#graphicTwo'), 1, {css:{left:'1000px', opacity:'0'}, ease:Back.easeOut})); 
                    controller.addTween('#graphicThree', TweenMax.from( $('#graphicThree'), 1, {css:{right:'1000px', opacity:'0'}, ease:Back.easeOut}));

                    footerAnimation();  

                }

                function footerAnimation() {
                    TweenMax.to( $('#footerTextLight'), .7, {delay: 2, css:{opacity:'1'}})
                    TweenMax.to( $('#footerTextDark'), .7, {delay:2, css:{opacity:'1'}})
                }
    });