jQuery的动画模块提供了包括隐藏显示动画、渐显渐隐动画、滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列、事件等等,
$.animate()的用法如下:animate(prop,speed,easing,callback),参数如下:
-
prop ;对象, ;包含将要动画的样式
-
speed ;字符串或数字 ;动画运行持续时间,单位毫秒,可以设置为"slow"、"normal"、"fast"等预定义时间
-
easing ;字符串 ;表示所使用的缓动函数
-
callback ;回调函数 ;当动画完成时被调用
还是举个栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> div{width: 200px;height: 50px;background: #cfc;} </style> </head> <body> <button>按钮</button> <div></div> <script> $('button').click(function(){
$('div').animate({width:'400px',height:'100px',background:'#f00'},2000,'linear',function(){alert('动画完成成功')})
}) </script> </body> </html>
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jQuery