jQuery 애니메이션을 일시 중지하는 방법은 무엇입니까?

Question

안녕하세요, 각 프레임 사이에 일시 중지 (setTimeout) jQuery 간단한 체인 애니메이션을 할려고 해요.

각 div가 3500의 지속 시간으로 움직입니다. 애니메이션의 각 불투명도 페이드 사이의 기간을 제어하고 싶습니다. 첫 번째 div와 두 번째 div 사이의 기간은 5 초이며, 두 번째 프레임과 세 번째 프레임 사이의 간격은 10 초입니다.

어떻게 하시겠습니까?

http://codepen.io/leongaban/pen/Feroh

현재 코드

$('#blue').animate({ 
      opacity: '1' 
     }, 3500, function(){ 

     // Need 5 sec pause here    

     $('#blue').fadeOut('fast'); 
     $('#orange').animate({ 
      opacity: '1' 
      }, 3500, function(){ 

       // Need a 10 sec pause here 

       $('#orange').fadeOut('fast'); 
       $('#green').animate({ 
       opacity: '1' }, 3500); 

      }); 
     }); 

Answer 1

delay() 및 queue()가 무엇 있다는 :

$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() { 
    $(this).fadeOut('fast'); 
    $('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() { 
     $(this).fadeOut('fast'); 
     $('#green').animate({opacity: '1'}, 3500); 
    }); 
}); 

FIDDLE

Answer 2

당신은 콜백와 jQuery를 페이드 아웃/fadeIn 방법을 사용할 수 있습니다.

자세한 내용은 here을 참조하십시오.

하지만 본질적으로;

$(".myClass").fadeOut(1000, function() { 
    //fadeOut complete 
}); 

첫 번째 인수는 완전히 페이드 아웃 될 때까지의 시간 길이 (밀리 초)입니다. 이 기간이 지나면 콜백이 실행됩니다. 따라서 콜백이 발생하여 필요한 대기 시간이 완료되면이를 안전하게 가정 할 수 있습니다.

fadeIn에 대해서도 같은 구문이지만, 필자가 제공 한 링크를 읽는 것이 좋습니다. 더 자세하게 설명 할 것입니다.

Answer 3

정확하게 이것은 .delay()가 (http://api.jquery.com/delay/)에 대한 것입니다. 당신은 여전히하지만, 다른 개체에 대한 애니메이션을 시작하는 콜백을 사용해야합니다

$("#foo").slideUp(300).delay(800).fadeIn(400); 

참고 : 그것은 당신이이 같은 개별 요소에 대한 애니메이션의 우아한 체인을 작성할 수 있습니다. 귀하의 경우에는

이는 (검증되지 않은)해야한다 :

$('#blue') 
    .animate({ opacity: '1' }, 3500) 
    .delay(5000) 
    .fadeOut('fast', 
      function() { 
       $('#orange') 
        .animate({ opacity: '1' }, 3500) 
        .delay() 
        .fadeOut('fast', 
           function() { 
            $('#green') 
             .animate({ opacity: '1' }, 3500); 
           }); 
      });