Question

我基本上尝试加载一个页面，该页面包含一组小部件，当点击该页面的导航按钮并加载页面然后逐渐淡出动画时，这些小部件应该依次为动画淡入淡出到下一页时，单击另一个导航按钮。

动画中的淡入淡出并不平滑......小部件在动画完成之后不会在动画中淡出动画我正在推动的方式......在前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
});

使用Jquery，第2部分，使用其他动画将其划分为另一个

2 个答案: