ASAIK jquery animate function accepts style properties only. but i want to animate the attributes of an element. consider a SVG element rectangle
<svg>
<rect id="rect1" x=10 y=20 width="100px" height="100px">
</svg>
i want to animate the rectangle element attribute "x" and "y" something like below
$("#rect1").animate({
x: 30,
y: 40
}, 1500 );
but it is not correct way because animate function affects style not attribute of an element.
i knew so many custom plugin is there like raphel.js.
http://raphaeljs.com/
but i don't want to use custom plugin to do this. i want to do this simply in jquery.animate function.
is this possible ?
Thanks,
Siva
The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback);
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
Step Function It accepts two arguments ( now and fx ), and this is set to the DOM element being animated. fx : a reference to the jQuery.
just animate the old fashioned way:
you can call animate
in a jquery like fashion.
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
);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With