jQuery .animate（）和移动时干扰图像

Question

如何使用jQuery向右或向左移动图像来制作圆滑的动画。 在Firefox或IE浏览器中，它的工作情况要好得多。当持续时间设置为2000或更长时，特别糟糕的是干扰。 这里是我的演示页的样本：http://pastehtml.com/view/1bj06p8.html

代码是：

$('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(); 
     } 
    }); 

为什么没有图像移动圆滑？

谢谢！

Answer 1

原因是它会继续调用mousemove，重复多次调用动画。

您应该限制对这些方法的调用。