在動畫運行時更新動畫速度

Question

我正在爲練習做一個小型賽馬動畫。我想每隔100毫秒改變div的速度，每個div必須有不同的速度。下面的代碼不能按我的預期工作。

var v = setInterval(function() { 

     v = Math.floor(Math.random() * (9000 - 2000 + 1)) + 2000; 

     return v; 

    }, 500) 



$("#start").click(function() { 

    $("#karauzum").animate({left: "400px"}, v, function() { 

     list.push("karauzum"); 

    }); 

    $("#gelibolu").animate({left: "400px"}, v, function() { 

     list.push("gelibolu"); 

    }); 

    $("#yalnizefe").animate({left: "400px"}, v, function() { 

     list.push("yalnizefe"); 

    }); 

    $("#ucanoglu").animate({left: "400px"}, v, function() { 

     list.push("ucanoglu"); 

    }); 

順便說一句完整的頁面就在這裏：http://kilavuzbaykus.com/atyarisi.html

Answer 1

jQuery的動畫，通過函數值存儲的速度，而不是引用，所以你不能改變它中期執行。但是，您可以暫時停止動畫並使用新值重新啓動它。

你可以找到一個很好的解釋在這裏：https://stackoverflow.com/a/14673731/4780390