jQuery - Pausing and resuming a looping animation too quickly causes the queue to go haywire -
i have following code animates forever, pauses @ end of current animation on mouse enter, , resumes on mouse leave. works how want except 1 issue.
if hover in , out of element (e.g. cutting across corner) causes kind of queue build , goes haywire. when check queue there's nothing strange in , animations not running in queued order.
using following code waggle mouse in , out of grey area. when allow animations resume go haywire (also available @ http://jsfiddle.net/54ytx/).
$('body').html('<div style="background: lightgrey;">testing</div>'); function do_animations() { // 0 or 1 console.log($('div').queue('fx').length); $('div') .delay(1000) // hardcoded numbers mean resuming bottom position takes longer doesn't matter in simple example .animate({'padding-top': '100px'}, 1000) .animate({'padding-top': '0px'}, 1000) // queue instead of callback clearqueue() can stop loop reliably .queue(function() { do_animations(); $('div').dequeue(); }); }; do_animations(); $('div').hover(function() { // don't use stop(). want current animation finish $('div').clearqueue(); }, function() { do_animations(); });
with clearqueue remove steps queue, first animations not in queue. remove repeating callback. when moving mouse fast in , out, stack of 2 animations piled every mousein.
adding .stop() before delay() might trick without harming queue because removes other animations on element.
you have change 2 animations queued when done first time.
i know thats example, in hove event should use: $(this).clearqueue(); if have more 1 div on page.
Comments
Post a Comment