Definition and Usage
animate ()
method to perform a custom animation CSS attribute set.
This method will be changed by the CSS style element from one state to another. CSS property value is gradually changing, so you can create animation.
Only numeric values can create animations (such as "margin: 30px"). String value can not create animations (such as "background-color: red").
Tip:
Use the "+ =" or "- =" to create a relative animation.
grammar
$(selector).animate({styles},speed,easing,callback)
parameter
| parameter | Necessary | description |
|---|---|---|
| styles | Yes |
One or more predetermined attributes CSS animate / value.
Note: When used with animate () method, the attribute name must be written hump: You must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
You can apply animation attributes:
提示：颜色动画不包含在核心 jQuery 库中。如果您想要应用动画颜色，您需要从 jQuery.com 下载 颜色动画插件。
|
| speed | 否 |
规定动画的速度。
可能的值：
|
| easing | 否 |
规定在动画的不同点中元素的速度。默认值是 "swing"。
可能的值：
提示：扩展插件中提供更多可用的 easing 函数。
|
| callback | 否 |
animate 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问 jQuery Callback 。
|
实例
下例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#009688;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
相关知识