कस्टम वैल्यू का jQuery एनिमेट (सीएसएस प्रॉपर्टी नहीं)

Question

मैं अजीब चीज़ करना चाहता हूं: एनीमेट के साथ एक वैल्यू चेंज करें जो सीएसएस संपत्ति नहीं है बल्कि सिर्फ एक चर है।

मुझे इसकी आवश्यकता है क्योंकि जब कोई उपयोगकर्ता अपनी सीमा पर क्लिक करता है तो मैं तत्व को घुमाता हूं। तो मुझे कोण मान को एनिमेट करने की आवश्यकता है और फिर इसे कस्टम ड्राइंग एल्गोरिदम में उपयोग करें।

मैंने अपने कोण मूल्य को संग्रहीत करने और इसे एनिमेट करने के लिए बस एक छिपी हुई डीआईवी की सीएसएस संपत्ति का उपयोग करने की कोशिश की, लेकिन यह ठीक से काम नहीं करता है।

क्या कोई मुझे इसके साथ मदद कर सकता है?

Answer 1

बस इस जबकि एक ही बात के लिए खोज और सही जवाब

$({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/

Answer 2

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>'); 
    } 
}); 

Answer 3

आप देख रहे हैं करने के लिए "स्पिन" कुछ, आप कर सकते हैं do that with css और इसलिए, आप jQuery animate function उपयोग कर सकते हैं।

Answer 4

परेशान करना animate फ़ंक्शन को चलाने के लिए वास्तव में कुछ सीएसएस गुणों की आपूर्ति किए बिना काम करना संभव नहीं है (यह आपको बीच में मूल्य नहीं देता है)।

तुम भी एनीमेशन वास्तविक तत्व (या चर) पर काम कर आप बदलना चाहते हैं तो यह रूप में इतनी तरह @Andrew द्वारा वर्णित step तर्क का उपयोग काम करने के लिए यह हैक किया जा सकता है की आवश्यकता नहीं है:

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

हालांकि, यह बहुत अक्षम है क्योंकि यह (हालांकि अनुपस्थित) तत्व की ऊंचाई सीएसएस संपत्ति को बिना किसी बदलाव के बदल रहा है। इस तरह की चीज करने के लिए Tween JS जैसे "ट्विनिंग" लाइब्रेरी का उपयोग करना बेहतर है।