自定義值的jQuery動畫（不是CSS屬性）

我想做最奇怪的事情：使用animate進行值更改，這不是一個css屬性，而只是一個變量。自定義值的jQuery動畫（不是CSS屬性）

我需要這個，因爲我想旋轉一個元素，當用戶點擊其邊框。所以我需要動畫角度值，然後在自定義繪圖算法中使用它。

我試圖使用隱藏的DIV的css屬性來存儲它的角度值併爲其設置動畫效果，但它無法正常工作。

任何人都可以幫我嗎？

2011-11-16 Epsiloncool

根據JQuery的動畫DOC http://api.jquery.com/ animate /：「除了樣式屬性外，還可以設置一些非樣式屬性，例如scrollTop和scrollLeft以及自定義屬性。」 – mjhm

只是偶然發現了這一點的同時尋找同樣的事情，正確的答案似乎是

$({foo:0}).animate({foo:100}, { 
    step: function(val) { 
     // val takes values from 0 to 100 here 
    } 
})

上找到http://james.padolsey.com/javascript/fun-with-jquerys-animate/

來源

2013-05-31 12:57:56 georg

這就是我一直在尋找的。我不希望更改任何DOM元素的屬性，樣式或JavaScript屬性。 – funrob

請注意，起始值必須爲零。因此，假定結束值爲「1」並進行自己的進度計算可能更容易：val = start_val *（1-val）+ end_val * val; –

這是一個很好的學習技巧。 +1這應該是答案 –

-3

jQuery有一些所謂的有史以來之後激發的動畫更換step function，

$('li').animate({ 
    opacity: .5, 
    height: '50%' 
}, 
{ 
    step: function(now, fx) { 
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now; 
    $('body').append('<div>' + data + '</div>'); 
    } 
});

來源

2011-11-16 15:28:38 Andrew

在我看來，這並不回答原來的海報問題。我發現這個頁面想要做原始的海報想要做的事情（使用放鬆動畫而不是CSS屬性），這並不能回答這個問題。 – Flipster

這不具體動畫*非屬性*。 @ thg435的答案是正確的。 – Ciantic

@georg的答案回答了這個問題 –

如果您正在尋找「旋轉」的東西，你可以do that with css，因此，你可以使用jQuery animate function。

來源

2011-11-16 15:48:16 Spycho

令人煩惱的是，如果不實際提供一些CSS屬性來處理它（它不會給你中間的值），就不可能運行animate函數。

你並不需要甚至有動畫的實際元素（或變量）的工作，你想改變，因此有可能破解它使用step參數由@Andrew像這樣描述的工作：

$('<div/>').css({ height: _your_start_value }).animate({ 
    height: _your_end_value 
}, { 
    step: function (currentValue) { 
     //do what you need to with the current value.. 
    } 
});

但是，這是非常低效的，因爲它正在不必要地改變（雖然未附加）元素的高度CSS屬性。最好使用「補間」庫（如Tween JS）來做這種事情。

來源

2013-04-18 15:20:31

自定義值的jQuery動畫（不是CSS屬性）

回答

相關問題