动画的div一个正确的其他使用jQuery，第2部分后，(Animate Divs One Righ

进出口基本试图加载有一组都应该淡入动画一前一后点击该页面的导航按钮和页面加载时，然后淡出动画控件的页面，才去到下一个页面，点击另一个按钮导航的时候。

在动画中的褪色不顺畅......小部件不以动画淡出之后其他完成动画林推动...第2个部件，这不正确动画之外的方式。 但是，其余的开始，同时动画，只是速度慢于之前的小部件，根据我的时间设置。

我也不能得到要播放的动画的淡出部分，当我点击进入下一个页面。

请保持在与小部件的页面，被加载到父页面上的一个div的头脑，所以基本上小部件自己单独的html页面（widgets.html）如果你愿意上。

我怎样才能解决这个问题呢？

父页上我的导航链接：

<!--The dynamic load part loads the outside page into the div-->    
<ul id="Navbar">
       <li><a href="Page1.html" class="dynamicLoad">Page1</a></li>
       <li><a href="Page2.html" class="dynamicLoad">Page2</a></li>
       <li><a href="Page3.html" class="dynamicLoad">Page3</a></li>
       <li><a href="Page4.html" class="dynamicLoad">Page4</a></li>
    </ul>

小部件页面上的动画代码：

//Declare FadeIn Animation Rules
    <script>
    function animateIn(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            700,
            callback);
    }

    function animateIn1(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            1400,
            callback);
    }

    function animateIn2(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            2100,
            callback);
    }



    //Declare FadeOut Animation Rules

    function animateOut(divId, callback) {
        $(divId).animate(
            {opacity:0},
            700,
            callback);
    }

    function animateOut1(divId, callback) {
        $(divId).animate(
            {opacity:0},
            1400,
            callback);
    }

    function animateOut2(divId, callback) {
        $(divId).animate(
            {opacity:0},
            2100,
            callback);
    }





    //Start FadeIn Animation

    $("#MyWidget").animate(
        {opacity:1.0}, 300, 
        function() {
            animateIn1("#MyWidget1");
            animateIn2("#MyWidget2");
            animateIn3("#MyWidget3");
            animateIn4("#MyWidget4");
        }
    );


    //Start FadeOut Animation

    $("#next-page").click(function($event) {
        $event.preventDefault();
        var href = $(this).attr("href");

        animateOut4("#MyWidget4");
        animateOut3("#MyWidget3");
        animateOut2("#MyWidget2");
        animateOut1("#MyWidget1", function() {
           animateOut("#MyWidget");
       });
    });


    </script>

Answer 1:

我建议有回调，而不是时间偏移，也许是这样的链接灵界： http://jsfiddle.net/p8gj8/6/

Answer 2:

使用ready()函数：

$(document).ready(function() {
  // your functions
});

这样的动画不会在网页加载时运行。

您也可以试试：

$(window).load(function() {
      // your functions
});

文章来源: Animate Divs One Right After the Other with Jquery, Part 2