jQuery动画 animate()
- animate() 用于创建自定义动画的函数
- 这个函数的关键在于指定动画形式及结果样式属性对象
- 这个对象中每个属性都表示一个可以变化的数值的样式属性(如“height”、“top”或“opacity”)
- 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left
参数animate(p,[s],[e],[fn])
- params:一组包含作为动画属性和终值的样式属性和及其值的集合
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
- fn:在动画完成时执行的函数,每个元素执行一次
写一个盒子的大小和位置动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: #0000FF;
border: 5px solid #DB7093;
margin-left: 10px;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#div1").animate({
width:500,
height:500,
marginLeft:600
},3000);
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>