jquery动画元素属性而不是样式

ASAIK jquery animate函数仅接受样式属性。 但我想动画元素的属性。 考虑一个SVG元素矩形

我想动画矩形元素属性“x”和“y”，如下所示

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

但这不是正确的方法，因为动画function会影响样式而不是元素的属性。

我知道有很多自定义插件就像raphel.js一样。

An Intro to Raphaël

但我不想使用自定义插件来做到这一点。 我想简单地在jquery.animate函数中这样做。

这可能吗 ？

谢谢，

湿婆

Answer 1

只是用老式的方式制作动画：

你可以像时尚一样在jquery中调用animate 。

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 2

我会尝试这样的事情

在脚本中：

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

Answer 3

好的，这里的所有答案都是特定于SVG或重新实现.animate（）jQuery调用，我找到了一种方法来使用jQuery调用，而不会遇到动画启动时属性重置为0的问题：

假设我们想要使用id image为img标签元素设置width和height属性的动画。 要将它从当前值设置为300，我们可以这样做：

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

在这种方法中，我们使用不在DOM内部的div并在其中设置动画值，然后我们使用div CSS值来​​动画我们的元素。 不是很漂亮但是完成工作，如果你需要停止动画，可以在animationDiv上调用.stop() 。

的jsfiddle

Answer 4

我喜欢Hoffmann的方法，但我认为没有创建虚拟dom对象会更优雅。

这是我的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' 

汇编成

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

Answer 5

这可能很简单

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