一、动画
1、介绍
jQuery 给我们封装了很多动画效果方法，我们只需要调用即可轻松实现对应的动画效果。常见的动画效果如下：
| 方法 | 作用 |
|---|---|
| show()、hide()、toggle() | 显示或隐藏元素 |
| slideDown()、slideUp()、slideToggle() | 元素划入划出效果 |
| fadeIn() 、fadeOut() 、 fadeToggle()、 fadeTo() | 元素淡入淡出效果 |
| animate() | 自定义动画 |
| stop() | 停止动画 |
还有一点要特别注意：jquery 中的动画一旦被触发，就一定会执行，如果短时间触发多个动画效果，那么这些动画效果将会排队执行，但是我们可以通过 stop 停止动画排队，具体后面我们会讲到。
2、显示与隐藏
jQuery提供的实现元素的显示与隐藏的方法有：show()、hide()、toggle()。在实际应用中，我们通常是直接调用这些方法，但其具体语法规范如下：
show():
hide():
toggle():
案例代码：
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
// 切换 是指 如果你正在显示，就让你隐藏 如果你隐藏 就让你显示
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
});
</script>
</body>
3、滑入与滑出
jQuery中提供的实现元素滑入滑出的方法有：slideDown()、slideUp()、slideToggle()。在实际应用中，我们通常是直接调用这些方法，但其具体语法规范如下：
slideDown():
slideUp():
slideToggle():
案例代码：
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑动 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑动 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
4、淡入淡出
jQuery中提供的实现元素淡入淡出的方法有：fadeIn()、fadeOut()、fadeToggle()、fadeTo()。在实际应用中，我们通常是直接调用这些方法，但其具体语法规范如下：
fadeIn():
fadeOut():
fadeToggle():
fadeTo():
案例代码：
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
5、自定义动画
自定义动画的功能非常强大，几乎能实现我们想要的任何动画效果，方法为：animate()，通过参数来调节要实现的动画效果，具体语法规范为：
案例代码：
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
6、停止动画排队
在 jQuery 中动画效果一旦被触发就一定会执行，如果在短时间内触发多次动画，就会造成动画延迟，多个动画排队执行的效果，但在这种情况下，我们通常只需要显示最后一个动画即可，所以此时我们需要用到 stop() 的方法。
stop() 方法的作用是立即停止上一次的动画效果，无论动画进行到哪一步。所以为了避免动画排队，我们需要在每次使用动画之前，先调用 stop() 停止上一次动画，再调用新的动画。
案例代码：
$(function() {
鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideDown(200);
});
// 鼠标离开
$(".nav>li").mouseout(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideUp(200);
});
})
7、事件切换效果
jQuery 中为我们添加了一个事件 hover() ，功能与 css 的伪类 :hover 类似，参数为鼠标移动到元素上触发的函数和鼠标移出元素时触发的函数。
语法：
hover([over,]out) // 其中over和out为两个函数
- over:鼠标移到元素上要触发的函数（相当于mouseenter 事件）
- out:鼠标移出元素要触发的函数（相当于mouseleave 事件）
- 如果只写一个函数，则鼠标经过和离开都会触发它
代码案例：
// 我们将上面的停止排队代码 用 hover 重新写一次
$(function() {
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").stop().slideDown(200);
// }, function() {
// $(this).children("ul").stop().slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
})
