animación jquery de atributos específicos

Question

Así que estoy usando gRaphael para crear algunos gráficos. Esto crea una línea de gráfico de barras interesante con algunos puntos. Esos puntos tienen los ... nodos con x = 10 y = 20 como sus atributos. Ejemplo

rect x = "135.8" y = "115.8" width = "8.399999999999999" height = "8.399999999999999" r = "0" rx = "0" ry = "0" llenar = "# ff0000" golpe = "ninguno"

Quiero usar jquery para animar a este tipo si es posible. La cosa es que si hago

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

Con el fin de animar la x coordenate no funciona por razones obvias, supongo ?? jeje. También he intentado establecer el atributo x en una variable e intentar animar eso y nada. ¿Alguien me puede ayudar con la animación y svg con gRaphael?

Esto, por ejemplo, funciona

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

se mueve el nodo pero por supuesto no se animan

Gracias!

Answer 1

Puede definitivamente animar una propiedad al hacerlo

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

No es necesario para salvar esa propiedad en CSS .

Answer 2

Solo puede animar propiedades CSS válidas que tengan un valor numérico. Los colores se pueden animar a través de algunos complementos. Como 'x' no es una propiedad válida de CSS, no podrá animarlo utilizando la función .anmiate() de jQuery.

Creo que tendrías que escribir tu propia función de animación para incrementar el valor de x cada vez que pasas el tiempo de espera.

Answer 3

De hecho, no es una manera de animar un atributo específico:

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

Answer 4

Estoy trabajando en un proyecto que utiliza svgs. Mientras hacía funcionar lo anterior, el valor animado iba de 0 a cualquier lugar, incluso si tiene un valor antes de la animación. Así que he usado este lugar (valor inicial para Cy es 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

he encontrado una manera de utilizar la llamada jQuery sin tropezar con el problema de que el atributo se restablece a 0 cuando la animación se inicia como algunas otras respuestas aquí

Digamos que queremos animar el atributo width y height de un elemento de etiqueta img con id image. Para animar a su valor actual a 300 podríamos hacer esto:

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

En este enfoque se utiliza un div que no está dentro del DOM y la animación de los valores en ella, se usa entonces los valores div CSS para animar nuestra elemento. No es muy bonito, pero hace el trabajo, si necesita detener la animación puede llamar al .stop() en animationDiv.

jsfiddle