jQuery animate能否仅修改指定属性？背景样式意外改写问题咨询

这个问题其实是jQuery animate方法的一个常见小特性——当它操作元素的内联样式时，会把元素当前的内联样式重新解析并规范化输出，所以才会把你原来简洁的十六进制颜色值#999999转成了完整的RGB格式，还补全了背景样式的默认属性（比如none repeat scroll 0% 0%）。

要让animate只修改width属性，完全不触碰背景样式，最优雅的解决方案是把背景样式从内联移到CSS类中，具体步骤如下：

1. 重构样式结构 #

把原来的内联背景样式抽离到CSS里：

#animate {
  background: #999999;
  width: 100%;
}

对应的HTML简化为：

<div id="animate"></div>

2. 执行animate动画 #

现在再运行你的animate代码：

$('#animate').animate({width: '50%'}, 500, function() {});

这样操作后，animate只会修改元素的内联width属性，背景样式因为定义在CSS类中，完全不会被jQuery的animate方法干扰，Firebug中查看的结果会是：

<div id="animate" style="width: 50%;"></div>

为什么原来的写法会出现样式改动？ #

jQuery的animate方法在处理样式时，会先读取元素的计算样式（computed style），然后将你要修改的属性和当前的内联样式合并后重新设置回元素。这个过程中，它会把所有样式属性转换成浏览器标准的规范化格式，所以才会把短格式的背景样式扩展成完整的长格式。

如果因为某些原因你必须保留内联背景样式，也可以在animate执行前先保存背景样式，动画结束后再恢复，但这种方法比较繁琐，不如抽离到CSS类中来得干净。

内容的提问来源于stack exchange，提问作者SeaBass