如何動畫滑動順利離開？

我有以下如何動畫滑動順利離開？

 $('.left_arrow').hover(function() { 
      $('.chart').stop().animate({ 
       left: "+=10" 
      }); 
     }, 
     function() { 
      $('.chart').stop(); 
     });

而且我想擁有它，當你將鼠標放在箭頭自如移動.chart向左，右箭頭它，它移動到右側。我正在通過應用- left (-7500px is the max)將其移動到左側，而0是最遠的。

以上移動超過10，但它不會繼續移動它。我怎樣才能得到它，所以它一直在移動它。我用的是類似

 $('.left_arrow').hover(function() { 
      $('.chart').stop().animate({ 
       left: "-7500px" 
      }, 20000); 
     }, 
     function() { 
      $('.chart').stop(); 
     });

但問題是，如果我說-6500px在它需要20秒去1000的其餘部分，對20秒去充分的距離。所以速度是偏斜的，我想要一個標準的增量。

來源

2014-11-06 Steven

難以完全理解沒有一些工作的代碼，但默認放寬'.animate （）'是'swing'。如果你想要一個「標準增量」 - 將緩動類型改爲「線性」 – elzi 2014-11-06 20:51:43

我想將鼠標放在箭頭上，並使用負左CSS屬性向左移動div，但我希望它是增量，而不是基於剩餘的距離。 – Steven 2014-11-06 20:53:33

我會提供一個aswer，一秒鐘。 – elzi 2014-11-06 20:56:12

基本上你需要的是速率函數。當我創建我的旋轉木馬時，我遇到了同樣的問題。

rate = distance/time

所以，你的速度是0.375

現在，所有你需要做的是找到的距離，你可以相應地調整你的時間。

time = distance/0.375

因此，它應該是這個樣子：

$('.left_arrow').hover(function() { 
     var distance = /*Get Distance Remaining*/ 
     var sd = 7500; 
     var time = 20000; 
     var rate = sd/time; 
     var time = distance/rate 

     $('.chart').stop().animate({ 
      left: "-7500px" 
     }, time); 
    }, 
    function() { 
     $('.chart').stop(); 
    });

很顯然，這將需要一些調整，以得到恰到好處。但是這個概念就在那裏。

對於我的情況，因爲我使用的是<ul>，因爲它是一個旋轉木馬，這是我得到的距離的方式：

distance = Math.abs($ul.position().left);

來源

2014-11-06 21:01:00 Adjit

沒有完全理解問題，但你可以遞增/遞減動畫像這樣：

$('.chart').stop().animate({ 
    "left": "+=100px" 
}, 250);

注意+=操作。

編輯：此答案只是部分正確。懸停時的動畫行爲不符合要求。試圖解決。

來源

2014-11-06 20:57:48 elzi

我試過了，但它移動了100px，然後停下來。我如何讓它繼續下去？ – Steven 2014-11-06 21:00:35

嗯，它嵌套在'懸停'中，所以它只會在你懸停時執行。另外，嘗試刪除'.stop（）'方法並在其他地方執行/一次 – elzi 2014-11-06 21:01:37

如何動畫滑動順利離開？

回答

相關問題