动画Div的一个正确的其他使用jQuery后，第2部分

进出口基本试图加载有一组都应该淡入动画一前一后的小部件点击该页面的导航按钮时，页面和页面加载，然后淡入淡出动画，然后进入下一页，当另一个导航按钮被点击时。动画Div的一个正确的其他使用jQuery后，第2部分

动画中的淡入淡出...小部件不会在另一个完成动画之后淡入淡出动画IM进行动画的方式...在前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>

来源

2010-12-23 WillingLearner

我会建议使用回调函数，而不是时间偏移，也许类似链接的变淡这个：http://jsfiddle.net/p8gj8/6/

来源

2010-12-23 08:18:54 keegan3d

使用ready()函数：

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

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

您也可以试试：

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

来源

2010-12-23 08:23:27 superUntitled

动画Div的一个正确的其他使用jQuery后，第2部分

回答

相关问题