通過十進制值生成動畫

var Y = 0.2; // Motion step 
var X = 0.6; 

(function go(){ 

    $('#m').animate({ 
    left: '+='+(X) , 
    top: '+='+(Y)  
    }, 30, 'linear', go); 

}());

移動一個元素對角但不是45°（Y = 1，X = 1），而不是浮動數字的步驟。
Mozilla打得不錯，但所有其他瀏覽器不會移動一個小數點的值px值。通過十進制值生成動畫

你會用什麼方法？

來源

2012-03-29 Roko C. Buljan

而不是試圖通過遞歸來做到這一點，爲什麼不把它們設置爲整數並在一次animate（）調用中完成。這樣你就不必處理浮點數了，它仍然應該對角動畫。

var Y = 20; // cannot be >1 
var X = 60; // cannot be >1 

    function go(){ 

     $('#m').animate({ 
     left: '+='+(X) , 
     top: '+='+(Y)  
     }, 300, 'linear'); 

    } 
    go();

來源

2012-03-29 17:12:09

根據定義，像素是在當前屏幕分辨率下可以顯示（或不顯示）的最小元素。你可以使用％，我相信它可以跨瀏覽器工作，例如寬度：45.5％，但像素不是。另外你甚至可能不會注意到那個小的動作。

來源

2012-03-29 17:13:11 user92254225

這不完全正確。許多現代瀏覽器，包括Firefox在內，都使用具有「真實」/「浮點」尺寸的元素執行計算。 – deed02392 2012-03-29 17:19:40

正如您在Firefox的演示中看到的那樣，循環內的移動非常明顯！ – 2012-03-29 17:32:35

+1 thanx的提示和幫助 – 2012-03-29 18:53:45

問題是，當您設置左側和頂部時，它們會四捨五入爲像素。你看到45度的運動，因爲X和Y的四捨五入爲1。

爲什麼你不增加兩個JS變量（可以存儲浮點數），然後設置left和top等於他們在適當的時間（所以舍入將發生在總和而不是增量上）？

var Y = 0.2; // cannot be >1 
var X = 0.6; // cannot be >1 

var cur_left = $('#m').left; 
var cur_top = $('#m').top; 

function go(){ 
    cur_left += X; 
    cur_top += Y; 
    $('#m').animate({ 
    left: '='+(cur_left), 
    top: '='+(cur_top)  
    }, 30, 'linear', go); 
} 
go();

來源

2012-03-29 17:16:06

，雖然你改變的代碼將不起作用 - 我真的在想你的建議，寫一個函數，只有在數字四捨五入後，纔會觸發X和Y.我會考慮這個+1感謝提示和建議 – 2012-03-29 18:56:48

是的，對不起 - 沒有測試它，我的jquery很生鏽 - 但沿着這些線路的東西可能會解決這個問題。很高興我能幫上忙！ – 2012-03-29 19:14:04

通過十進制值生成動畫

回答

相關問題