Jquery로 나머지 부분 바로 뒤에 애니메이트 애니메이트, 파트 2

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