jquery animate para atributos de elementos no de estilo

La función de animación jQuery de ASAIK solo acepta propiedades de estilo. Pero quiero animar los atributos de un elemento. considera un rectángulo SVG elemento

   

Quiero animar el atributo de elemento de rectángulo “x” y “y” algo como abajo

 $("#rect1").animate({ x: 30, y: 40 }, 1500 ); 

pero no es la forma correcta porque la función animar afecta el estilo y no el atributo de un elemento.

Sabía que hay muchos plugins personalizados como raphel.js .

An Intro to Raphaël

pero no quiero usar un complemento personalizado para hacer esto. Quiero hacer esto simplemente en función jquery.animate.

es posible ?

Gracias,

Siva

sólo animar a la antigua usanza:

Se puede llamar animate en un jquery como la moda.

http://jsfiddle.net/wVv9P/7/

 function animate($el, attrs, speed) { // duration in ms speed = speed || 400; var start = {}, // object to store initial state of attributes timeout = 20, // interval between rendering loop in ms steps = Math.floor(speed/timeout), // number of cycles required cycles = steps; // counter for cycles left // populate the object with the initial state $.each(attrs, function(k,v) { start[k] = $el.attr(k); }); (function loop() { $.each(attrs, function(k,v) { // cycle each attribute var pst = (v - start[k])/steps; // how much to add at each step $el.attr(k, function(i, old) { return +old + pst; // add value do the old one }); }); if (--cycles) // call the loop if counter is not exhausted setTimeout(loop, timeout); else // otherwise set final state to avoid floating point values $el.attr(attrs); })(); // start the loop } $('button').on('click', function() { animate( $('#rect1'), // target jQuery element { x:100, y:300, width:50, height:100 }, // target attributes 2000 // optional duration in ms, defaults to 400 ); }); 

Probaría algo como esto

    

en el guión:

 var myElemX = $('.myElement').attr('x'); var myElemY = $('.myElement').attr('y'); $("#rect1").animate({ left: myElemX+'px', top: myElemY+'px' }, 1500 ); 

Bien, todas las respuestas aquí son específicas para SVG o para reimplementar la llamada janery .animate (), encontré una forma de usar la llamada jQuery sin encontrar el problema de que el atributo se reinicia a 0 cuando comienza la animación:

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

 var animationDiv= $("
"); //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 usamos un div que no está dentro del DOM y animamos los valores en él, luego usamos los valores del div CSS para animar nuestro elemento. No es muy bonito pero hace el trabajo, si necesita detener la animación, puede llamar a .stop() en animationDiv.

jsfiddle

Me gusta el enfoque de Hoffmann, pero creo que es más elegante sin crear un objeto dom virtual.

Este es mi fragmento de coffeescript

 $rects.each -> that = @ $({width: 0}).animate width: parseInt($(@).attr('width')) , duration: 2000 easing: 'easeIn' step: -> $(that).attr 'width', Math.round(@.width) done: -> console.log 'Done' 

que comstack en

 return $rects.each(function() { var that; that = this; return $({ width: 0 }).animate({ width: parseInt($(this).attr('width')) }, { duration: 1000, easing: 'easeIn', step: function() { return $(that).attr('width', Math.round(this.width)); }, done: function() { return console.log('Done'); } }); }); 

esto puede ser simple para ti

 $("your div id").css("position", "absolute").animate({ left: 159, top: 430 });