jquery animation of specific attributes

You can definitely animate a property by doing so

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

You do not need to save that property in CSS.

I'm working on project which uses svgs. While I got the above to work, the animated value went from 0 to where-ever even if it has a value before the animation. So I used this instead (initial value for cy is 150):

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

In fact, there is a way to animate a specific attribute:

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