jQuery 动画 _animate() 方法

一、jQuery animate() 方法用于创建自定义动画。

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            top:'500px'/*css样式里加上display:block和首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。*/
        });
    });
</script>
</head>
<body>
    <div style="height:100px; width:200px; border:2px solid #0F0; position:relative; background:red; display:block"></div>
</body>

默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

二、jQuery animate() - 操作多个属性

生成动画的过程中可同时使用多个属性：

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            left:'250px',
              opacity:'0.5',
              height:'150px',
              width:'150px',
            fontSize:'30px'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

几乎所有的css属性都可以设置不过，需要记住的是当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

三、jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            left:'250px',
              opacity:'0.5',
              height:'+=100px',/*可以使用这种方法给其设置值*/
              width:'+=150px',
            fontSize:'+=30px'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

四、jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
        $("div").animate({
            height:'toggle'
        });
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

五、jQuery animate() - 使用队列功能

如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
            var div=$("div");
            div.animate({left:'400px',opacity:'0.5',height:'+=500px',width:'+=550px',fontSize:'+=100px'},'show');
            div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
            div.animate({left:'400px',opacity:'0.5',height:'+=700px',width:'+=750px',fontSize:'+=120px'},'show');
            div.animate({left:'100px',opacity:'0.5',height:'100px',width:'150px',fontSize:'20px'},'show');
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(function(){
            var div=$("div");
            div.animate({left:'400px',opacity:'0.5',height:'+=100px',width:'+=150px'},'show');
            div.animate({fontSize:'3em'},'show');
    });
</script>
</head>
<body>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute; text-align:center; line-height:100px;">SAMSUNG</div>
</body>