一、使用方法
1、$("div").animate( {width:"300px"});
$("div").animate( {'width':'300px'});
$("div").animate( {'width':300+"px"});
$("div").animate( {'width':300});
$("div").animate( {width:300});
以上五种方法效果相同
注：（1）属性值需要被引号包裹起来，如前三种方法中都包含了字符串'px'则需要用引号。
但是数值不需要，如第四五种方法中的300不需要引号，其中不区分单双引号。
（2）属性名可以不被引号包裹，其中不区分单双引号。
（3）当数值型的属性值不加单位时，默认为'px'。
2、$("div").animate( {width:"300px",fontSize:30});
（1）font-size这种中间带有横线的属性需要去除横线，但是需要将第二个单词首字母大写。
（2）当{}里面放多个属性时需要用逗号隔开。
3、$("div").animate({width:'300px',fontSize:30,backgroundColor:'red'},500);
（1）上述2中提到中间带有横线的属性需去除横线等，本例中backgroundColor同理，但是animate本身不可以设置颜色等属性，则需要引入如下js方可使用：
<script src="jquery.animate-colors.js"></script>
下载地址：http://www.bitstorm.org/jquery/color-animation/
（2）animate({}，500) 表示执行该动画的时间为5秒。
（3）例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="jquery.animate-colors.js"></script>
<style>
.div span{
display: block;
width: 100px;
height: 200px;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="div">
<span>demo</span>
</div>
<script>
$('.div span').click(function(){
$(this).animate({fontSize:30,width:300+'px',backgroundColor:'red'},500);
});
</script>
</body>
</html>
4、$("div").animate( {width:"1000px"},5000,function(){alert("在动画执行完成后弹出该框")});
该例子指当5秒执行动画之后，调用函数function()。
二、css中的不是所有属性都可以用animate来动态改变，下面总结了可以操作元素的一些属性：
* backgroundPosition
* borderWidth
* borderBottomWidth
* borderLeftWidth
* borderRightWidth
* borderTopWidth
* borderSpacing
* margin
* marginBootom
* marginLeft
* marginRight
* marginTop
* outlineWidth
* padding
* paddingBottom
* paddingLeft
* paddingRight
* paddingTop
* height
* width
* maxHeight
* maxWidth
* minHeight
* minWidth
* font
* fontSize
* bottom
* left
* right
* top
* letterSpacing
* wordSpacing
* lineHeight
* textIndent
* opacity
三、相关网址
http://www.bitstorm.org/jquery/color-animation/
https://github.com/jquery/jquery-color/
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
