如何在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();
请参阅: