自定义动画——animate()

时间 2019-11-17

标签自定义动画 animate 繁體版

原文原文链接

在JQuery中，经过使用animate()方法，能够容许用户自定义动画，制做出效果更优雅、动做更复杂的页面动画效果。javascript

animate()方法给开发者自定义各类复杂、高级的动画提供了极大的方便和空间，其调用语法为:css

　　animate(params,[duration],[easing],[callback])html

　　参数params表示用于制做动画效果的属性样式和值的集合。java

　　可选项[duration]表示三种默认的速度字符“slow”、“normal”、“fast”或自定的数字。jquery

　　可选参数[easing]为动画插件使用，用于控制动画的表现效果，一般有“linear”和“swing”字符值。ajax

　　可选参数[callback]为动画完成后，执行的回调函数。api

PS：在动画方法animate()中，第一个参数params在表示动画属性时，须要采用“骆驼”写法，即若是是“font-size”，必须写成“fontSize”才有效，不然报错。函数

（1）功能描述动画

　　在页面中，单机某块<div>元素，其自身的高度和宽度以动画的效果增大。动画完成后，元素的边框加粗，而且边框颜色及<div>元素内容发生变化。ui

（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({    //宽与高变化的动画效果
                width:"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)