0

我有走过浏览器窗口的动画脚步声。我有一个函数 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, index, inorout, selector1, selector1b, 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>
4

1 回答 1

3

.stop()和.clearQueue()动画元素。

例如：

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

看：

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

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

于 2013-08-13T14:11:01.483 回答