jquery特定属性的动画

所以我正在使用gRaphael创建一些图表。 这将创建一个很酷的条形图线，其中包含一些点。 这些点具有……节点，其中x = 10 y = 20作为其属性。 例

rect x =“135.8”y =“115.8”width =“8.399999999999999”height =“8.399999999999999”r =“0”rx =“0”ry =“0”fill =“＃ff0000”stroke =“none”

如果可能的话，我想用jquery为这个人制作动画。 如果我这样做的话

 $（ “矩形”）。点击（函数（{
  $（本）.animate（{
    'X'：30
  }）;
 }）;

为了给x coordenate制作动画，我觉得它不起作用的原因很明显？ 呵呵。 此外，我已经尝试将属性x设置为变量并尝试设置动画，而不是任何动画。 任何人都可以用gRaphael帮助我制作动画和svg吗？

这例如有效

 $（“rect”）。live（'click'，function（）{$（this）.attr（'x'，100）;}）; 

它移动节点，但当然不会动画它

谢谢！

Answer 1

您可以通过这样做来制作房产动画

 $("rect") .animate( { x: 100 }, { duration: 1000, step: function(now) { $(this).attr("x", now); } }); 

您不需要在CSS中保存该属性。

Answer 2

我正在研究使用svgs的项目。 当我完成上述工作时，动画值从0变为任何地方，即使它在动画之前有一个值。 所以我改用它（cy的初始值是150）：

 $('#navlet .li1').mouseenter(function(){ $({cy:$('#nav_dot').attr('cy')}) .animate( {cy: 60}, {duration:200,step:function(now){$('#nav_dot').attr('cy', now);}}); }); 

Answer 3

实际上，有一种方法可以为特定属性设置动画：

 $("rect").each(function(){ $(this).css("MyX",$(this).attr("x")) .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}}) }) 

Answer 4

我找到了一种方法来使用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 5

您只能为具有数值的有效CSS属性设置动画。 颜色可以通过一些插件动画。 由于’x’不是有效的CSS属性，因此您将无法使用jQuery内置的.anmiate（）函数为其设置动画。

我认为你必须编写自己的动画函数，以便在每次超时超时时增加x的值。