Pause animation when mousemove event occurs
<p>I have the following code:</p>

<pre><code>$(source)
.on('mouseenter', start)
.on('mouseleave', stop)
.on('mousemove', zoom.move);
</code></pre>

<p>Here I attach few mouse event listeners. When 'mouseenter' event occurs, the following function is executed:</p>

<pre><code>    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);

    }
</code></pre>

<p>It works great for now, but when 'mousemove' event occurs, the following is executed:</p>

<pre><code>    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';

    },
</code></pre>

<p>The problem is that when mousemove event occurs I should clear animation queue, but there I have transition animation that needs to complete first. These both effects are applied to the same element, so if I simple write the following:</p>

<pre><code>$img.clearQueue().stop();
</code></pre>

<p>... transition animation is not displayed.</p>

<p>You can see live example in the following fiddle: <a href="http://jsfiddle.net/SL8t7/" rel="nofollow">http://jsfiddle.net/SL8t7/</a></p>
