2011-02-25 237 views
3

我有一個滑動div和幾個按鈕,這些按鈕將以不同的速度觸發動畫(通過使用不同的持續時間值)。JQuery animate:在運行時更改速度

的按鈕是這樣的: [左X2] [左X1] [左X0.5] [右X0.5] [右X1] [右X2]

我的代碼,目前想:

//leftVal is set based on where the div is currently placed 
    //timeLeft is set based on which button is "on hover" 

    $('#content-holder').animate({  
    "left": leftVal   
    }, {queue:false, duration:(timeLeft), easing:"quadEaseOut"});  

這在Chrome中很好,但在IE等其他瀏覽器中,這會導致跳動動畫,並且您可以在以新速度繼續前一秒看到滾動div停止一秒。

我有一種感覺,實現變速滾動的最佳方式是直接影響動畫的持續時間而不殺死它並開始新的動畫,但我不確定這是否可能。有小費嗎?

+0

您是在加載dom或事件觸發器時直接進行動畫製作嗎?如果在加載dom時,您可能會嘗試延遲一些動畫開始。事實上,Chrome瀏覽器的JavaScript遠比IE瀏覽器更流暢。 – dmidz 2011-09-18 10:00:18

回答

1

我認爲你正在尋找這樣的:

$('#content-holder').stop().animate({  
"left": leftVal 
}, {queue:false, duration:(timeLeft), easing:"quadEaseOut"}); 

.stop()殺死了隊列,之後,你開始你的動畫。 (http://api.jquery.com/stop/

我通常使用它來避免我的網站在您發送多個按鈕時跳出。

請注意,因爲您正在使用緩動,動畫將無法順暢運行。當您調用新動畫時,緩動將從一開始就「發揮」。

但是,閱讀描述,如果你的問題,我想這就是你想要的。

請讓我知道它是否有幫助!