如何在jQuery中停止动画队列？

我有动画的脚步声穿过浏览器窗口.我有一个函数geckoWalk(),它计算足迹的位置并对动画进行排队.我有很多同时出现和消失,所以代码有点复杂,是的,我需要使用队列.

现在我想要做的是每次用户滚动到页面的最顶部时启动动画,并在它们开始向下滚动时中止它.

我的问题：如何修改函数,以便我可以从函数外部停止队列.

功能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,selector2)
}

哦,这些是我使用的页面上的div

<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>

解决方法

动画元素上的.stop()和.clearQueue().

例如：

$('#geckoprint_r').stop().clearQueue();

看到：

http://api.jquery.com/stop/

http://api.jquery.com/clearQueue/

原文地址：https://www.jb51.cc/jquery/181053.html