jQuery animate() 操作动画
华俊贤
jQuery animate() 方法
jQuery animate()方法用于创建自定义动画。
以下示例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
//此版本是百度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>语法：$(selector).animate({params},speed,callback);
必选的params参数定义要设置动画的CSS属性。
可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
可选的回调参数是动画完成后要执行的函数。
注意：默认情况下，所有HTML元素都具有静态位置，并且无法移动。要操纵位置，请记住首先将元素的CSS position属性设置为relative，fixed或absolute！
jQuery animate() 操作多个属性
以下示例演示了animate()可以同时为多个属性设置动画：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
//此版本是百度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>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</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>是否可以使用animate()方法操作所有CSS属性？
是的，差不多！ 但是，有一件重要的事情需要记住：当与animate()方法一起使用时，所有属性名称必须是驼峰式的：您需要编写paddingLeft而不是padding-left，marginRight而不是margin-right，依此类推。
jQuery animate() 使用相对值
也可以定义相对值（该值相对于元素的当前值）。 这是通过在值前加上+ =或 - 来完成的：
以下示例演示了animate()方法使用相对值：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
//此版本是百度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>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</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>
类似资料：