特定の属性のjqueryアニメーション

Question

私はグラフを作成するためにgRaphaelを使用しています。これは、そこにいくつかの点を持つクールな棒グラフ線を作成しています。それらのドットは、その属性としてx = 10 y = 20の...ノードを有する。 例

RECT X = "135.8"、Y = "115.8" 幅= "8.399999999999999" 高さ= "8.399999999999999" R = "0" RX = "0" RY = "0" で埋める= "＃FF0000" ストローク= "none"

可能であれば、jqueryを使ってこの人をアニメーション化したいと思います。それが問題なのです。

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

xコーディネイトをアニメーション化するには、明白な理由のために動作しませんか？ hehe。 また、属性xを変数に設定してアニメーション化しようとしましたが、何もしませんでした。アニメとsvgをgRaphaelで手伝ってもらえますか？例えば

これは、ノードを移動しますが、それを

おかげでofcourseのアニメーション化されません

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

を作品！

Answer 1

を

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

あなたはCSSでそのプロパティを保存する必要はありません。

Answer 2

数値を持つ有効なCSSプロパティのみをアニメーション化できます。色はいくつかのプラグインを介してアニメ化することができます。 'x'は有効なCSSプロパティではないので、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からどこまでになりました。アニメーションは、いくつかの他の回答のように起動したとき、私は属性が0にリセットされることを問題に実行せずにjQueryのコールを使用する方法を発見し

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

Answer 5

：だから私は、この代わりに（CYの初期値は150である）を使用しましたここをクリック

imageのimgタグ要素のwidthとheight属性をアニメートしたいとします。我々はこれを行うことができます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 CSS値を使用し、DOM内にないdiv要素を使用して、それに値をアニメーション化素子。あなたはアニメーションを停止する必要がある場合は、をanimationDivに呼び出すことができます。

jsfiddle