javascript - Pause animation when mousemove event occurs -

i have following code:

$(source) .on('mouseenter', start) .on('mouseleave', stop) .on('mousemove', zoom.move); 

here attach few mouse event listeners. when 'mouseenter' event occurs, following function executed:

    automove: function myautomove() {          var xpos = rand(0, outerwidth);         var ypos = rand(0, outerheight);          $(img).animate({             'top': (ypos - offset.top) * -yratio + 'px',             'left': (xpos - offset.left) * -xratio + 'px'          }, defaults.speed, myautomove);      } 

it works great now, when 'mousemove' event occurs, following executed:

    move: function (e) {          var left = (e.pagex - offset.left),         top = (e.pagey - offset.top);          top = math.max(math.min(top, outerheight), 0);         left = math.max(math.min(left, outerwidth), 0);          img.style.left = (left * -xratio) + 'px';         img.style.top = (top * -yratio) + 'px';      }, 

the problem when mousemove event occurs should clear animation queue, there have transition animation needs complete first. these both effects applied same element, if simple write following:

$img.clearqueue().stop(); 

... transition animation not displayed.

you can see live example in following fiddle: http://jsfiddle.net/sl8t7/

i recommend adding onmousemove listener animation set in "start" method. also, remove onmousemove listener when "stop" method fires.

that way mousemove ever gets triggered after transition complete.

here jsfiddle changes i've proposed

http://jsfiddle.net/xrkna/1/

you'll see move event waits transition finish now.

i moved event binding here...

                $(source)                 .on('mouseenter', start)                 .on('mouseleave', stop); 

to here

                function start() {                     zoom.init();                     $img.stop().                     fadeto($.support.opacity ? settings.duration : 0, 1, function(){$img.on('mousemove', zoom.move)});                     zoom.automove();                 }                  function stop() {                     $img.off('mousemove', zoom.move);                     $img.clearqueue().stop()                                         .fadeto(settings.duration, 0);                     manual_step = 0;                 }