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 に答える