如何使用 jquery 平滑切换边框宽度？

Question

我正在尝试在 0 和 5 之间平滑切换跨度的边框宽度。 这是我试过的代码，在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
      );
     }
     }

当我尝试转到 5px 时，它似乎可以工作，但是当我再次运行该函数以动画回 0 时，边框立即设置为 0，只有边距动画。

Answer 1

似乎是一个错误... 我遇到了同样的问题，但注意到以下问题：

• FireFox (3)：没有动画回0
• Chrome：没有动画回到0
• Safari(winXP)：无动画回0
• Opera (10)：没问题。动画效果很好
• IE (8)：没问题。动画效果很好

打算进一步调查...

-- 编辑--

在 bugs.jquey.com 上找到答案：ticket 7085

borderWidth 属性是一个速记属性，它返回一个字符串，该字符串是由空格分隔的一系列数字。 .animate() 方法仅记录为对数字属性进行动画处理，例如borderLeftWidth。

我通过像这样将动画设置为 0px 来解决我的问题：

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