如何在jQuery中停止动画队列? [英] How to stop an animation queue in jQuery?

问题描述

我有生动的足迹在浏览器窗口中行走.我有一个函数geckoWalk()来计算足迹的位置并使动画排队.我同时出现和衰落很多，所以代码有点复杂，是的，我需要使用队列.

I have animated footsteps walking across the browser window. I have a function geckoWalk() that calculates the position of the footsteps and queues the animation. I have a lot of appearing and fading going on at the same time, so the code is a little complicated and, yes, I need to use the queue.

现在我要做的是，每当用户滚动到页面顶部时就启动动画，并在每次向下滚动时中止动画.

Now what I want to do is start the animation every time the user scrolls to the very top of the page, and abort it whenever they start scrolling down.

我的问题:如何修改功能，以便可以从功能外部停止队列.

My question: How to modify the function so I can stop the queue from outside the function.

函数geckoWalk()

function 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)+')');
    }

}

我还尝试使用以下代码在函数中停止队列，但此方法不起作用.

I also tried stopping the queue within the function using the following code, but it didn't work.

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

Oh and these are divs on the page I use

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

这篇关于如何在jQuery中停止动画队列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！