div滾動jquery動畫不光滑

我已經把我的示例工作代碼在http://jsfiddle.net/ULeuu/1/。問題是我試圖使用jQuery進行動畫製作，但滾動並不平滑。有沒有一種辦法，這樣我可以讓DIV滾動順暢div滾動jquery動畫不光滑

2011-12-20 user850234

你能詳細點嗎？您正在使用哪個瀏覽器？什麼版本的jQuery？ – Shades88 2011-12-20 09:14:07

我想他是說如果鼠標按住下，它應該連續滾動，不滾動，停止，滾動和停止等。 – Purag 2011-12-20 09:18:01

@ShantanuD我想要Purmou指出的方式 – user850234 2011-12-20 09:32:03

insted的的fast給在.animate一定的價值像

$("#slide").stop().animate({"left":leftVal + 177 + 'px'},1000);

來源

2011-12-20 09:15:51 xyz

這隻會讓速度變慢。如果你注意到，動畫在中途暫停很短暫。這就是他想要擺脫的。 – Purag 2011-12-20 09:19:41

@Ajinkya我已經試過這個，但是無法擺脫Purmou提到的 – user850234 2011-12-20 09:32:57

首先，同步setTimeout的和.animate()的持續時間延長設置動畫持續時間爲400，如超時。

二，使用linear寬鬆政策以消除任何動畫堆棧：

$("#slide").stop().animate({"left":leftVal + 177 + 'px'}, { "duration": 400, "easing": "linear" });

Demo。

來源

2011-12-20 09:21:13 Samich

我已經看到了你所做的更正，但是在滾動期間存在某種視覺失真。我已經嘗試過，但沒有得到滾動插件的工作效果。它可以隨着視覺清晰度而變得平滑，否則在觸摸設備中，輕微的視覺差異更加明顯。 – user850234 2011-12-20 09:46:38

懸停時連續滾動的目標是？
使用與您的動畫具有相同時間量的setInterval，並使用線性緩動。
- 使用jQuery 1.9.1

(function(){ 
       var myObject = { 
        leftInt: '', 
        rightInt: '', 
        init: function(){ 
         $this = this; 
         $(function(){ 
          $this.eventListeners(); 
         }); 
        }, 
        eventListeners: function(){ 
         $('#prev').on("mouseenter", myObject.goLeft); 
         $('#prev').on("mouseleave", myObject.stopLeft); 
         $('#next').on("mouseenter", myObject.goRight); 
         $('#next').on("mouseleave", myObject.stopRight); 
        }, 
        goLeft: function(){ 
         myObject.leftInt = setInterval(myObject.slideLeft, 300); 
        }, 
        goRight: function(){ 
         myObject.rightInt = setInterval(myObject.slideRight, 300); 
        }, 
        stopLeft: function(){ 
         clearInterval(myObject.leftInt); 
        }, 
        stopRight: function(){ 
         clearInterval(myObject.rightInt); 
        }, 
        slideLeft: function(){ 
         $("#slide").stop(true, true).animate({"left":'+=20px'}, 300, 'linear'); 
        }, 
        slideRight: function(){ 
         $("#slide").stop(true, true).animate({"left":'-=20px'}, 300, 'linear'); 
        } 
       } 
       myObject.init(); 
      })();

來源

2013-02-12 23:23:47

div滾動jquery動畫不光滑

回答

相關問題