jQuery .animate() and jamming image while moving

Question

Hi!

How to make sleek animation with jQuery of image moving right or left. It's working much better in Firefox than in Chrome or IE. Especially bad is jamming when duration is set to 2000 or more. Here is a sample of my demo page: http://pastehtml.com/view/1bj06p8.html

Code is:

$('img#image').mousemove(function(e){
        if (e.pageX > winWidth - moveAtX) {
            $('#status').html("go right");

            var left = { left: winWidth - imgWidth + 'px' }
            $('img#image').animate(
                left, 
                { queue:false, duration: "slow" }
            );
        }
        else if (e.pageX <= moveAtX) {
            $('#status').html("go left");

            var left = { left: '0px' };
            $("img#image").animate(
                left,
                { queue:false, duration: "slow" }
            );
        }
        else {
            $('#status').html(e.pageX +', '+ e.pageY + ' stop');
            $('img#image').stop();
        }
    });

Why isn't an image moving sleek?

Thanks!

Answer 1

The reason is that it continues making the call to mousemove, repeating many times the calls to animate.

You should limit the calls to these methods.