自定义动画—

自定义动画——animate()

在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)

高否？富否？帅否？否？滚去学习！