animate动画函数
概述:在前端DOM中,动画实现的原理:定时器+信号量
在jQuery函数库直接提供了一个封装函数可供使用
语法格式:
$(selector).animate(json,time,callback);
-
第一个参数【必有】:JSON数据格式用来设置动画最终完成的样式属性值
-
第二个参数【可选】:动画时间的设置【毫秒】
-
第三个参数【可选】:当动画执行完毕的时候立即执行一次
-
注意:JQ函数库中的animate动画:很多样式都可以参与动画,但涉及到颜色的部分不能参与动画
一animate动画基本使用
样式部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>
<!--引包-->
<script type=" text/javascript" src="js/jQuery.min.js"></script>
</head>
<body>
<div>哈哈哈</div>
</body>
animate动画函数
$('div').animate({
'left':500,
'width':