4.2 jQuery 中的动画
4.2.1 show() 和 hide()方法
show() 和 hide()方法让元素动起来
show("slow"|"normal"|"fast") 长度分别为600ms、400ms、200ms.
show(1000) 表示在 1000ms 内展示完毕.
4.2.2 fadeIn() 和 fadeOut()方法
方法作用：改变元素的不透明度。
4.2.3 slideUp() 和 slideDown()方法
方法作用：改变元素的高度。
4.2.4 自定义动画方法 animate() 方法
animate(params, [speed], [callback]):
1) params 为属性值及其映射，一般为 json 格式;
2) speed 为速度;
3) callback 为动画完成时执行函数。1. 自定义简单动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQ-动画</title>
<style>
#app {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #003322;
}
</style>
<script src="../jquery-1.8.3.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
$(function() {
$("#app").click(function() {
$(this).animate({
left: "100px"
}, 300);
});
});
</script>
</body>
</html>
2. 累加、累减动画
$(this).animate({left: "+=100px"}, 300); // 离左边距离增加 100px3. 多重动画
(1) 同时执行多个动画
$(this).animate({left: "+=100px", height: "+=100px"}, 300); // 离左边距离增加 100px 高度增加100px 同时执行(2) 按顺序执行多种动画
$(this).animate({left: "+=100px"}, 300); // 离左边距离增加100px 先执行
$(this).animate({height: "+=100px"}, 300); // 高度增加100px 后执行4. 综合动画
以上动画效果的混合应用
4.2.5 动画回调函数
如果想在动画执行后改变元素的 css 样式， 这时就不能使用 css() 方法， 因为 css() 方法在动画执行之前就会立即执行。 所以这时候就要用到回调函数。
4.2.6 停止动画和判断是否处于动画状态
stop([clearQueue],[gotoEnd]): clearQueue 和 gotoEnd 只能取 Boolean 值。
clearQueue:
gotoEnd: 直接使用 stop() 方法，则会立即停止当前正在进行的动画， 如果后续有动画则等待继续进行，以刚才的状态执行动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQ-动画</title>
<style>
#app {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #003322;
}
</style>
<script src="../jquery-1.8.3.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
$(function() {
$("#app").hover(function() {
$(this).stop()
.animate({ // 此时触发光标事件则会执行下面的动画，
left: "+=100px", // 而不会执行光标移出时的动画
}, 1000)
.animate({
height: "+=100px"
}, 1000)
}, function() {
$(this).stop()
.animate({
left: "-=100px",
}, 1000)
.animate({
height: "-=100px"
}, 1000)
});
});
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。