jquery animate per gli attributi degli elementi non in stile

Question

La funzione di animazione jQuery ASAIK accetta solo proprietà di stile. ma voglio animare gli attributi di un elemento. prendere in considerazione un elemento SVG rettangolo di

<svg> 
<rect id="rect1" x=10 y=20 width="100px" height="100px"> 
</svg> 

voglio animare l'attributo rettangolo di elemento "x" e qualcosa di "y" come qui di seguito

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

ma non è il modo corretto perché la funzione animate colpisce stile non attribuire di un elemento.

sapevo che così tanti plugin personalizzati sono lì come raphel.js.

http://raphaeljs.com/

ma io non voglio usare il plugin personalizzato per fare questo. Voglio farlo semplicemente nella funzione jquery.animate.

è possibile?

Grazie,

Siva

Answer 1

vorrei provare qualcosa di simile

<svg> 
    <rect class="myElement" id="rect1" x="10" y="20" width="100px" height="100px"> 
</svg> 

nello script:

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

Answer 2

solo animare la vecchia maniera:

puoi chiamare animate in modo jquery.

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

Answer 3

questo mese di maggio si adatta in modo semplice

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

Answer 4

Va bene tutte le risposte qui sono o specifici per SVG o reimplementare il .animate() jQuery chiamata, ho trovato un modo per utilizzare il Chiamata jQuery senza eseguire il problema che l'attributo viene reimpostato su 0 all'avvio dell'animazione:

Diciamo che vogliamo animare lo width e height attributo di un elemento tag img con ID image. Per animare dal suo valore corrente di 300 abbiamo potuto fare questo:

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

In questo approccio si usa un div che non è all'interno del DOM e animare i valori in essa, abbiamo poi utilizzare i valori div CSS per animare la nostra elemento. Non molto carina ma il lavoro è fatto, se hai bisogno di interrompere l'animazione puoi chiamare .stop() su animationDiv.

jsfiddle

Answer 5

mi piace l'approccio Hoffmann, ma penso che è più elegante senza creare un oggetto DOM virtuale.

Questo è il mio CoffeeScript snippet

$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' 

che compila in

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'); 
    } 
    }); 
});