Belirli özelliklerin jquery animasyonu

Question

Bazı grafikler oluşturmak için gRaphael kullanıyorum. Bu, içinde bazı noktalar bulunan serin bir çubuk grafik çizgisi oluşturuyor. Bu noktalar, öznitelikleri olarak x = 10 y = 20 olan düğümlere sahiptir. Örnek

rect x = "135.8" y = "115.8" genişlik = "8,399999999999999" yükseklik = "8,399999999999999" r = "0" rx = "0" ry = "0" doldurmak = "# ff0000" inme = "yok"

Mümkünse bu adamı canlandırmak için jquery kullanmak istiyorum. Ben animasyon için

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

yaparsak şeydir x coordenate sanırım bilinen nedenlerle çalışmıyor ?? hehe. Ayrıca, x değişkenini bir değişkene ayarlamayı denedim ve bunu harekete geçirmeye çalıştım. Herhangi biri bana gRaphael ile animasyon ve svg yardımcı olabilir mi? Örneğin

Bu düğüm taşır ama tabii o

Teşekkür animasyon gelmez

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

çalışıyor!

Answer 1

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

CSS içinde o mülkü kurtarmak gerekmez .

Answer 2

Yalnızca sayısal bir değeri olan geçerli CSS özelliklerini canlandırabilirsiniz. Renkler bazı eklentilerle canlandırılabilir. 'X' geçerli bir CSS özelliği olmadığından, jQuery'nin yerleşik .anmiate() işlevini kullanarak onu canlandıramazsınız.

Sanırım bir zaman aşımının her geçişini x değerini artırmak için kendi animasyon işlevinizi yazmak zorundasınız. Aslında

Answer 3

Belirli bir niteliği animasyon uygulamak için bir yol vardır: Kesinlikle böyle yaparak bir özellik canlandırabilirsiniz

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

Answer 4

svgs kullanan projede çalışıyorum. Yukarıdakilerin işe yaramasına rağmen, animasyon değeri, animasyondan önceki bir değere sahip olsa bile, 0'dan nereye gitti. animasyon diğer bazı cevaplar gibi başladığında ben özellik 0'a reset olur böyle bir sorun haline çalıştırmadan jQuery çağrısını kullanmak için bir yol bulmuş

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

Answer 5

: Ben bu yerine (cy için başlangıç ​​değeri 150) kullanılan Burada image kimliğine sahip bir img etiket elemanının width ve height özniteliğini canlandırmak istediğimizi söyleyelim. 300 bugünkü değerinden onu canlandırmak için biz bu yapabilirdi: Bu yaklaşımda

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") 
     } 
    } 
) 

biz DOM içinde değil bir div kullanmak ve içindeki değerleri animasyon, biz o zaman canlandırmak div CSS değerleri kullanmak bizim öğesi. Çok hoş değil ama işi bitirir, animasyonu durdurmanız gerekiyorsa, animationDiv'de .stop()'u arayabilirsiniz. 'Sol'

jsfiddle