在JQuery中,通过使用animate()方法,可以允许用户自定义动画,制作出效果更优雅、动作更复杂的页面动画效果。
animate()方法给开发者自定义各种复杂、高级的动画提供了极大的方便和空间,其调用语法为:
animate(params,[duration],[easing],[callback])
参数params表示用于制作动画效果的属性样式和值的集合。
可选项[duration]表示三种默认的速度字符“slow”、“normal”、“fast”或自定的数字。
可选参数[easing]为动画插件使用,用于控制动画的表现效果,通常有“linear”和“swing”字符值。
可选参数[callback]为动画完成后,执行的回调函数。
PS:在动画方法animate()中,第一个参数params在表示动画属性时,需要采用“骆驼”写法,即如果是“font-size”,必须写成“fontSize”才有效,否则报错。
(1)功能描述
在页面中,单机某块<div>元素,其自身的高度和宽度以动画的效果增大。动画完成后,元素的边框加粗,并且边框颜色及<div>元素内容发生变化。
(2)实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .box{border: solid 1px #ccc;background-color: #eee;width: 100px;height: 100px;font-size: 13px;padding: 5px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script> $(function(){ $(".box").click(function(){ $(this).animate({ //宽与高变化的动画效果 "20%", height:"200px" }, 3000,function(){ $(this).css({"border":"solid 4px orange"}) .html("变大了!"); }); }); }) </script> </head> <body> <div class="box"> 点击变大 </div> </body> </html>
结果如下图所示:
通过animate()方法,不仅可以用运动效果增加元素的长和宽,还能以动画效果移动页面种的元素,即改变其相对位置。
例如:
$("div").animate({ left:"20px", top:"60px" },3000)