如何用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

似乎是一个bug ...我遇到了同样的问题,但注意到以下几点:

• FireFox(3):没有动画回到0
• Chrome:没有动画回到0
• Safari(winXP):没有动画回到0
• 歌剧(10):没问题.动画很好
• IE(8):没问题.动画很好

要进一步调查......

- 编辑 -

在bugs.jquey.com上找到了答案:7085票

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

我通过动画像0px解决了我的问题:

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