使用 Jquery 一个接一个地为 Div 设置动画，第 2 部分答案

【问题标题】：Animate Divs One Right After the Other with Jquery, Part 2使用 Jquery 一个接一个地为 Div 设置动画，第 2 部分
【发布时间】：2010-12-23 05:40:18
【问题描述】：

我基本上试图加载一个页面，该页面具有一组小部件，当单击该页面的导航按钮并加载页面时，这些小部件应该一个接一个地淡入动画，然后在开始之前淡出动画到下一页，当单击另一个导航按钮时。

动画的淡入不平滑...在另一个小部件完成动画后，我推动的方式不会立即淡入动画...在前 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>

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

我建议使用回调而不是时间偏移来链接淡入淡出，可能是这样的：http://jsfiddle.net/p8gj8/6/

【讨论】：

【解决方案2】：

使用ready()函数：

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

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

你也可以试试：

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

【讨论】：