맞춤 기능을 일시 중지하는 방법

Question

항목을 추가 및 제거하고 (앞에 & 추가) 호버와 클릭 둘 다에서 일시 중지하고 싶습니다.

아래에 작성한 사용자 정의 기능을 참조하십시오. 특정 클래스의 버튼을 클릭하여이 시퀀스를 일시 중지하고 같은 버튼 (재생/일시 중지 유형)으로 다시 시작할 수 있습니다. 이상적으로 항목이 추가되는 div의 onhover/제거.

이 특정 시나리오에 대한뿐만 아니라 솔루션을 얻을 좋은 것입니다 가능한 경우에 대한 좀 더 일반적인 하나의 일시 정지/I 함수는 offical 한 JQuery와 하나

하지 않는 한 .stop이 작동하지 않습니다 이해 사용자 정의 함수를 재개

어떤 도움/지침은 많이 감사합니다, 나는 더 나은

감사에 대한 설명이 그래서 더 철저 (바보의 가이드)에 비교적 새로운 오전!

$(function() { 


    var SECONDS_BETWEEN = 5; 
     var SLIDE_DURATION = 1; 
     var FADE_DURATION = 1; 

     var items = []; 

     $(document).ready(function() { 
      $('.item').each(function() {items.push($(this)); $(this).remove()}); 
      add_item(); 
     }); 

     function add_item() { 
      var item = items.shift(); 


      item.removeAttr('style'); 
      item.find('.contentitem').removeAttr('style'); 

      item.hide().prependTo('.innerwrapper') 
       .slideDown(
        SLIDE_DURATION*1000, 
        function() {   
         item.find('.contentitem').fadeTo('slow', 1); 
        } 
       ); 


      items.push(item); 


      setTimeout(add_item, SECONDS_BETWEEN*1000) 


     } 


}); 

Answer 1

버튼을 클릭 한 콜백과 같은 다른 기능을 통해 액세스 할 수있는 플래그를 저장하는 것이 쉬운 방법입니다. add_item() 함수의 시작 부분에서 계속 플래그를 설정할 수 있는지 확인해야합니다. 당신의 예에서

:이 Here을 확인할 수 있습니다

$(function() { 
    var SECONDS_BETWEEN = 5; 
    var SLIDE_DURATION = 1; 
    var FADE_DURATION = 1; 

    /* Define a flag to pause the animation */ 
    var paused = false; 
    var items = []; 

    $(document).ready(function() { 
     $('.item').each(function() {items.push($(this)); $(this).remove()}); 
     add_item(); 
    }); 


    $(".togglebutton").click(function() { 
     /* Toggle the animation */ 
     paused = !paused; 
    }); 

    function add_item() { 
     /* Check the flag */ 
     if(!paused) { 
      var item = items.shift(); 
      item.removeAttr('style'); 
      item.find('.contentitem').removeAttr('style'); 

      item.hide().prependTo('.innerwrapper') 
       .slideDown(
        SLIDE_DURATION*1000, 
        function() {   
         item.find('.contentitem').fadeIn('slow'); 
        } 
       ); 

      items.push(item); 
     } 
     setTimeout(add_item, SECONDS_BETWEEN*1000); 
    } 
});​​​ 

.