विशिष्ट विशेषताओं की jquery एनीमेशन

Question

तो मैं कुछ चार्ट बनाने के लिए gRaphael का उपयोग कर रहा हूं। यह इसमें कुछ बिंदुओं के साथ एक शांत बार चार्ट लाइन बना रहा है। उन बिंदुओं में ... x = 10 y = 20 के साथ नोड्स उनके गुणों के रूप में हैं। उदाहरण

रेक्ट एक्स = "135.8" y = "115.8" चौड़ाई = "8.399999999999999" ऊंचाई = "8.399999999999999" r = "0" rx = "0" ry = "0" भरने = "# ff0000" स्ट्रोक = "कोई नहीं"

यदि संभव हो तो मैं इस लड़के को एनिमेट करने के लिए jquery का उपयोग करना चाहता हूं। बात अगर मैं

 
$("rect").click(function({ 
$(this).animate({ 
    'x':30 
}); 
}); 

कर आदेश चेतन करने के लिए है x coordenate यह स्पष्ट कारणों मुझे लगता है के लिए काम नहीं करता है ?? Hehe। इसके अलावा मैंने एक चर को विशेषता x सेट करने और उसे और कुछ भी एनिमेट करने का प्रयास करने का प्रयास नहीं किया है। क्या कोई मुझे gRaphael के साथ एनीमेशन और svg के साथ मदद कर सकता है?

उदाहरण के लिए

यह काम करता है

 
$("rect").live('click',function(){ $(this).attr('x',100);});

यह नोड चला जाता है लेकिन बिल्कुल यह चेतन नहीं है

धन्यवाद!

Answer 1

आप निश्चित रूप से ऐसा करके एक संपत्ति चेतन कर सकते हैं

$("rect") 
    .animate(
     { x: 100 }, 
     { 
      duration: 1000, 
      step: function(now) { $(this).attr("x", now); } 
     }); 

आप सीएसएस में है कि संपत्ति को बचाने के लिए की जरूरत नहीं है ।

Answer 2

आप केवल वैध सीएसएस गुणों को एनिमेट कर सकते हैं जिनके पास संख्यात्मक मूल्य है। रंग कुछ प्लगइन्स के माध्यम से एनिमेटेड किया जा सकता है। चूंकि 'x' मान्य सीएसएस प्रॉपर्टी नहीं है, इसलिए आप jQuery के अंतर्निहित .anmiate() फ़ंक्शन का उपयोग करके इसे एनिमेट नहीं कर पाएंगे।

मुझे लगता है कि आपको टाइमआउट के प्रत्येक पासथ्रू x के मूल्य को बढ़ाने के लिए अपने स्वयं के एनीमेशन फ़ंक्शन को बहुत अधिक लिखना होगा।

Answer 3

वास्तव में, वहाँ एक विशिष्ट विशेषता चेतन करने के लिए एक तरीका है:

$("rect").each(function(){ 
    $(this).css("MyX",$(this).attr("x")) 
    .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}}) 
}) 

Answer 4

मैं प्रोजेक्ट पर काम कर रहा हूं जो svgs का उपयोग करता है। जबकि मुझे ऊपर काम करने के लिए मिला, एनिमेटेड वैल्यू 0 से कहीं भी चला गया - कभी भी अगर एनीमेशन से पहले इसका मूल्य हो। इसलिए मैं प्रयोग किया जाता है इस के बजाय (cy के लिए प्रारंभिक मूल्य 150 है):

$('#navlet .li1').mouseenter(function(){ 
    $({cy:$('#nav_dot').attr('cy')}) 
    .animate(
    {cy: 60}, 
    {duration:200,step:function(now){$('#nav_dot').attr('cy', now);}}); 
}); 

Answer 5

जब एनीमेशन कुछ अन्य उत्तर की तरह शुरू होता है मैं समस्या यह है कि विशेषता 0 पर रीसेट हो जाता है में चलने के बिना jQuery कॉल उपयोग करने के लिए एक रास्ता मिल गया यहां

आइए मान लें कि हम width और height आईडी image के साथ एक आईएमजी टैग तत्व की विशेषता को एनिमेट करना चाहते हैं। यह अपने वर्तमान मूल्य से 300 को चेतन करने के लिए हम ऐसा कर सकता है:

var animationDiv= $("<div></div>"); //we don't add this div to the DOM 
var image= $("img#image"); 
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do) 
animationDiv.css("left", image.attr("width")); 
animationDiv.css("top", image.attr("height")); 
animationDiv.animate(
    { 
     left: 300, 
     top: 300 
    }, 
    { 
     duration: 2500, 
     step: function(value, properties) { 
      if (properties.prop == "left") 
       image.attr("width", value + "px") 
      else 
       image.attr("height", value + "px") 
     } 
    } 
) 

इस दृष्टिकोण में हम एक div कि डोम के अंदर नहीं है का उपयोग करें और उस में मूल्यों चेतन, हम तो चेतन करने के लिए div सीएसएस मूल्यों का उपयोग हमारे तत्व। बहुत सुंदर नहीं है लेकिन काम पूरा हो जाता है, अगर आपको एनीमेशन को रोकने की ज़रूरत है तो आप एनीमेशनडिव पर .stop() पर कॉल कर सकते हैं।

jsfiddle