jquery特定属性的动画

Question

所以我用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为这个人制作动画.如果我这样做的话

$("rect").click(function({
 $(this).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);}});
});