基于jquery animate操作css样式属性小结

昨天有网友询问我是否可以使用jQuery的animate()方法来操作所有的CSS属性，我确认告诉他可以的。在操作的时候有几个重要的注意事项需要大家了解。

当使用jQuery的animate()方法时，所有的属性名都必须使用Camel标记法书写。比如，要使用"paddingLeft"而不是"padding-left"，"marginRight"而不是"margin-right"等。虽然大多数CSS属性都可以用animate()函数来动态改变，但并不是所有的CSS属性都支持。

以下是一些可以使用jQuery animate()方法操作的CSS属性：

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin及其各方向（bottom、left、right、top）

outlineWidth

padding及其各方向（bottom、left、right、top）

height和width及其最大值（maxHeight、maxWidth）、最小值（minHeight）

font和fontSize等。需要注意的是，在animate函数的css参数中指定的属性名称不同于标准的CSS属性名称。例如，标准的CSS属性是font-size，而在animate函数中则是fontSize。同样，上面列出的许多属性也是如此。还有一些其他可以动画化的属性，如bottom、left、right、letterSpacing、wordSpacing、lineHeight、textIndent以及opacity等。

接下来，让我们看一些animate()方法的实际使用例子：

例如，你可以使用以下代码将页面滚动到顶部：

```javascript

$('body').animate({scrollTop:0}, 1500);

```

这个代码将在1.5秒内将页面滚动到顶部。另一个例子是：

```javascript

$("body").animate({scrollTop:"-="+50},350);

```

这个代码将页面向下滚动50像素，耗时350毫秒。除了这些，animate()方法还可以用于禁用元素或遍历元素集合等。例如：

禁用和启用按钮：

```javascript

$('button').attr('disabled', 'disabled'); //禁用按钮

$('button').removeAttr('disabled'); //启用按钮

```

遍历输入框并获取其信息：

```javascript

$("input:text").each(function(index){

alert(index); //循环的下标值，从0开始

alert(this.value); //自带属性可以用this(Dom)直接取值

alert($(this).attr("type")); //自定义属性需要用attr()取值

});

```

还有一个名为cambrian.render('body')的代码片段，但遗憾的是，我无法确定它的具体功能，因为它似乎不是标准的jQuery或常见JavaScript库的方法。可能需要更多的上下文信息或源代码才能准确解释它的作用。希望这篇文章能帮助大家更好地理解jQuery的animate()方法以及如何使用它来操作CSS属性。