jquery animieren für Elementattribute nicht style

Question

ASAIK jquery animate-Funktion akzeptiert nur Stileigenschaften. aber ich möchte die Attribute eines Elements animieren. betrachten ein SVG Element Rechteck

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

ich will das Rechteck Element Attribut „x“ und „y“ so etwas wie unten

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

animieren, aber es ist nicht richtig so, weil belebte Funktion Attribut Stil nicht beeinflusst eines Elements.

ich wusste, dass so viele benutzerdefinierte plugin gibt es wie raphel.js.

http://raphaeljs.com/

aber ich möchte nicht, benutzerdefinierte verwenden Plugin, dies zu tun. Ich möchte dies einfach in jquery.animate Funktion tun.

ist das möglich?

Danke,

Siva

Answer 1

würde ich so etwas wie dieses

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

im Skript versuchen:

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

Answer 2

animieren einfach auf die altmodische Weise:

können Sie animate in einer jqueryähnlichen Art anrufen.

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

kann dies zu Ihnen passt einfach

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

Answer 4

Okay alle Antworten hier sind entweder spezifisch für SVG oder die .animate() jQuery Aufruf neu implementieren, fand ich einen Weg, der verwenden Rufen Sie jQuery auf, ohne dass das Problem auftritt, dass das Attribut beim Start der Animation auf 0 zurückgesetzt wird:

Sagen wir, wir möchten dieanimieren 210 und height Attribut eines img-Tag-Elements mit der ID image. So animieren sie von ihrem aktuellen Wert bis 300 konnten wir dies tun:

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

Bei diesem Ansatz verwenden wir ein div, die nicht innerhalb des DOM und animieren Werte darin, verwenden wir dann die div CSS-Werte zu animieren unsere Element. Nicht sehr hübsch, aber erledigt die Arbeit, wenn Sie die Animation stoppen müssen, können Sie .stop() auf animationDiv aufrufen.

jsfiddle

Answer 5

Ich mag den Ansatz Hoffmann, aber ich denke, eleganter ist es, ein virtuelles Objekt dom ohne zu schaffen.

Dies ist mein Coffee Schnipsel

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

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