javascript - 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'}})
                }
    });