jQuery에서 애니메이션 대기열을 중지하는 방법은 무엇입니까?

나는 브라우저 창을 가로 질러 움직이는 발자국을 움직였다. 나는 발자국의 위치를 계산하고 애니메이션을 큐에 넣는 geckoWalk() 함수를 가지고있다. 나는 동시에 나타나는 많은 페이딩과 페이딩을 가지고 있기 때문에 코드는 좀 복잡하고, 네, 큐를 사용해야합니다.jQuery에서 애니메이션 대기열을 중지하는 방법은 무엇입니까?

이제 사용자가 페이지의 맨 위로 스크롤 할 때마다 애니메이션을 시작하고 스크롤을 시작할 때마다 애니메이션을 시작합니다.

내 질문 : 함수 외부에서 큐를 중지 할 수 있도록 함수를 수정하는 방법.

기능 geckoWalk는()

function geckoWalk() { 
    $a = 200; 
    $deg = 1.2; 
    $dx = Math.round($a*Math.cos($deg)); 
    $dy = Math.round($a*Math.sin($deg)); 

    $screen = $(window).width(); 

    var $positions = {}; 
    $positions['xpos'] = new Array(); 
    $positions['ypos'] = new Array(); 
    $printsl = []; 
    $printsr = []; 
    $x = 100; 
    $y = 80; 

    for ($i = 0; $x < $screen+200; $i++) { 
     //$positions.push(Position($x, $y)); 
     $positions['xpos'][$i] = $x; 
     $positions['ypos'][$i] = $y; 
     $x = $x + $dx; 
     $y = $y + $dy; 
    } 

    for($i = 0; $i < $positions['xpos'].length; $i++) { 
     $("body").append($("#geckoprint_r").clone().attr('id', '').addClass('geckoprint_r').css({"bottom": $positions['ypos'][$i]-40+"px", "left": $positions['xpos'][$i]-100+"px", WebkitTransform: "rotate(" + (-20-$deg*180/3.14) + 'deg)', '-moz-transform': 'rotate(' + (-20-$deg*180/3.14) + 'deg)'})); 
     $("body").append($("#geckoprint_l").clone().attr('id', '').addClass('geckoprint_l').css({"bottom": $positions['ypos'][$i]+"px", "left": $positions['xpos'][$i]+"px", WebkitTransform: "rotate(" + (180-$deg*180/3.14) + 'deg)', '-moz-transform': 'rotate(' + (180-$deg*180/3.14) + 'deg)'})); 
    } 

    function animToQueue(theQueue, index, inorout, selector1, selector1b, selector2) { 
     anidelay = 200; 
     anispeed = 300; 
     theQueue.queue(function(next) { 
     if(index < 4) { 
      $(selector1).delay(anidelay+400).fadeIn(anispeed, function() { 
       $(selector1).delay(anidelay).fadeOut(anispeed+200); 
       $(selector1b).delay(anidelay).fadeIn(anispeed); 
       $(selector2).delay(anidelay+400).fadeOut(anispeed+200, next); 
      }); 
     } else { 
      $(selector1).fadeIn(anispeed, function() { 
       $(selector1).delay(anidelay).fadeOut(anispeed+300); 
       $(selector1b).delay(anidelay).fadeIn(anispeed); 
       $(selector2).delay(anidelay+400).fadeOut(anispeed+300, next); 
      }); 
     } 
     }); 
    } 

    var q = $({}); 

    for($i = 0; $i < $positions['xpos'].length; $i++) { 
     animToQueue(q, $i, 'in', '.geckoprint_o:eq('+($i+2)+')', '.geckoprint_gr:eq('+($i+2)+')', '.geckoprint_gr:eq('+($i-1)+')'); 
    } 

}

또한 다음 코드를 사용하여 함수 내에서 큐를 중지하려했지만 작동하지 않았다.

if ($(window).scrollTop() >= $(window).height()-$('header').height()) { 
    theQueue.dequeue(); 
} else { 
    $('header').css({'position': 'absolute', 'top':'auto','bottom' : '0'}); 
    theQueue.dequeue(); 
if ($(window).scrollTop() == 0) { 
    animToQueue(theQueue, index, inorout, selector1, selector1b, selector2) 
}

아 이들 내가 애니메이션 요소

<div id="geckoprint_l"><div><img class="geckoprint_gr" src="../assets/img/geckol.png"><img class="geckoprint_o" src="../assets/img/geckol_o.png"></div></div> 
<div id="geckoprint_r"><div><img class="geckoprint_gr" src="../assets/img/geckor.png"><img class="geckoprint_o" src="../assets/img/geckor_o.png"></div></div>

출처

2013-08-13 eevaa