How to smoothly toggle border-width with jquery?

Question

I'm trying to smoothly toggle the border-width of a span between 0 and 5. This is the code I have tried, developing in firefox

    function anim()
    {
     this.sw=!this.sw;
     if(this.sw)
     {
      //lower
      $('.cell_action').animate(
       {
        'border-width':'0px',
        'margin':0
       },
       600
      );
     }
     else
     {
      //raise
      $('.cell_action').animate(
       {
        'border-width':'5px',
        'margin':-5
       },
       600
      );
     }
     }

When I try to go to 5px, it seems to work, but when I run the function again to animate back to 0, the border is set immediately to 0 and only the margin animates.

Answer 1

Seems to be a bug... I'm having the same problem, but noticed the following:

• FireFox (3): No animation back to 0
• Chrome: No animation back to 0
• Safari(winXP): No animation back to 0
• Opera (10): No problems. Animates nicely
• IE (8): No problems. Animates nicely

Going to investigate further...

-- EDIT --

Found the answer on bugs.jquey.com: ticket 7085

The borderWidth property is a shorthand property and returns a string that is a series of numbers separated by spaces. The .animate() method is only documented to animate properties that are numeric, such as borderLeftWidth.

I fixed my problem by animating to 0px like this:

$this.animate({
  borderLeftWidth: "0px",
  borderTopWidth: "0px",
  borderRightWidth: "0px",
  borderBottomWidth: "0px"
}, 200);