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，重複多次調用動畫。

您應該限制對這些方法的調用。