jquery를 사용하여 애니메이션 일시 중지 및 다시 시작

Question

현재 프로젝트에서는 jquery를 사용하여 다양한 객체의 애니메이션을 배포했습니다. 누구나 애니메이션을 일시 중지하고 다시 시작할 수있는 방법을 제안 할 수 있습니까?

대기열에 대해 들었지만 적절한 일시 중지 및 재개를 수행 할 수 없습니다. 대기열을 사용하여 애니메이션을 일시 중지하는 방법을 제안하십시오. 여러 객체가 있으므로 버튼 클릭 및 모든 작업을 일시 중지해야합니다. 그 후 다른 버튼을 클릭하십시오.

누구든지 예제를 시연하거나 제공 할 수 있다면 당신의 모습 일 것입니다. http://api.jquery.com/animate/

stop - ,

Answer 1

당신은 시작하고 애니메이션을 일시 정지 할 수-jQuery를 animate() 및 stop()을 사용할 수 있습니다

animate을 (우리가 우리의 애니메이션 사이에 약간의 지연 기능을 가지고 일시 정지 플러그인이 작동하지 않았다) - http://api.jquery.com/stop/

체크 아웃 여기에 jQuery를 데모, http://jsfiddle.net/muthkum/KP74n/

Answer 2

stop() 기능을 사용하여 쉽게 수행 할 수 있습니다.

데모 :http://jsfiddle.net/6eMQq/

코드 : 중지하고 루프를 애니메이션 JQuery와 재개 방법에 대한

// to animate or continue animation 
$('#item').animate({width: '500px'}, 2000); 

// to pause the animation 
$('#item').stop(); 

Answer 3

function animateLoop($elem){ 
    var i = $elem.data("i"); 
    var ti = 1 - i; 
    var startPos = (2 * ti * contentWidth) - contentWidth; 
    $elem.css('margin-left', startPos + "px"); 
    $elem.animate( 
     { 
      'margin-left' : - contentWidth + "px" }, 
     { 
      duration: (time * 1000 * ti), 
      easing: 'linear', 
      step: function(v, p){ 
       $elem.data('i', i + p.pos * ti); 
       //console.log(i + p.pos * ti); 
      }, 
      complete: function(){ 
       $elem.data('i', 0); 
       animateLoop($elem); 
      } 
     } 
    ); 
}; 

$content.data('i',0); 
animateLoop($content); 

나의 제안.