jQuery动画
一、基本特效
.hide() 展示
.show() 隐藏
.toggle() 切换显示/隐藏
1、显示隐藏
鼠标移入p标签ul标签显示，鼠标移出整体的div标签ul隐藏
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 200px;
cursor: pointer;
border: 1px solid #ccc;
}
ul{
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>动画</title>
</head>
<body>
<div class="demo">
<p>Rose</p>
<ul>
<li>国泰民安</li>
<li>风调雨顺</li>
<li>五谷丰登</li>
</ul>
</div>
<script>
// 鼠标移入p标签，ul标签显示
$('p').on('mouseenter', function(){
$(this).next().show();
});
// 鼠标移出整体的div标签，ul再隐藏，所以mouseleave事件要绑定在.demo标签上
$('.demo').on('mouseleave', function(){
$(this).children('ul').hide();
});
</script>
</body>
</html>2、深入一个点
ul元素调用完.hide()以后，状态一定是display:none，
但是从display:none状态，调用show()还原成什么状态是有点讲究的
第一种情况
元素一开始手动设置的是dispaly:none的状态，然后show()显示后会还原成默认值
什么是默认值？
ul默认值是display:block
input默认值是display:inline-block
默认值是什么show()就还原成什么
第二种情况
div元素第一开始设置的是dispaly:inline-block，
通过hide()变成了display:none，
然后在show()就不会变成默认的，会变成设置的dispaly:inline-block
成哥总结：
有设置的就按照我们设置的，没设置就还原成默认的，
陈思彤老师总结：
无论是设置的还是默认的，最后还原是按照，最后一次呈现出的状态
3、运行动画的过程
$('p').on('mouseenter', function(){
$(this).next().show(3000);
});
$('.demo').on('mouseleave', function(){
$(this).children('ul').hide(3000);
});隐藏到显示的过程中，width、height、opacity、padding、margin（如果有padding、margin）它们一起从0到还原到展示的样子，
隐藏也是一样，width、height、opacity、padding、margin 一起往下减到0以后，设置成display:none
4、参数
null或(duration, easing, callblack)
duration：
执行过程的毫秒数。单词的意思是区间、延迟，持续时间的意思，
预设值有三个：normal（默认值，400毫秒），slow缓慢，fast快速
easing：
以什么样的方式动画
swing 开头慢、中间快、结尾慢（默认）
linear 水平匀速，线性变速的意思
callblack：
回调函数，动画结束后执行
第一个参数是过渡毫秒数，第二个参以什么样的方式过度（变化的线性函数）
$('p').on('mouseenter', function(){
$(this).next().show(1000, 'swing');
});
$('.demo').on('mouseleave', function(){
$(this).children('ul').hide(1000, 'linear');
});公司里一般很少使用show、hide这些参数，
即使需要用js + css3，动画既好看效率更高一些
5、.toggle()
需求是，点击显示，再点击隐藏
$('p').on('click', function(){
if($(this).next().css('display') == 'none'){
$(this).next().show();
}else{
$(this).next().hide();
}
});这样的需求可以用toggle()，传参数跟上面是一模一样的
$('p').click(function () {
$(this).next().toggle();
});toggle方法里面封装了奇偶数的判断功能
二、渐变
.fadeln() 淡入
.fadeOut() 淡出
.fadeTo()
.fadeToggle()
1、渐入渐出
淡入是透明度opacity属性值 0 ~ 1 的变化，淡出从 1 ~ 0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
width: 200px;
cursor: pointer;
border: 1px solid #ccc;
}
ul{
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>淡入淡出</title>
</head>
<body>
<div class="demo">
<p>Rose</p>
<ul>
<li>国泰民安</li>
<li>风调雨顺</li>
<li>五谷丰登</li>
</ul>
</div>
<script>
$('p').on('click', function () {
if($(this).next().css('display') == 'none'){
$(this).next().fadeIn();
}else{
$(this).next().fadeOut();
}
});
</script>
</body>
</html>最终的状态也是 display:block/none 的变化，只不过中间变化的过程
show()与hide()：是把透明度、width、height、margin、padding 一起能变的都变了，
fadeln()与fadeOut()：只专注于opactiy透明度的变化，
2、.fadeToggle()
$('p').on('click', function () {
$(this).next().fadeToggle(3000);
});时间放大3000毫秒后会发现，
从消失到出现，先让display变成block，然后让透明度opacity一点一点的变，
如果让透明先变到1后，再让display变成block就看不出淡入了，这个逻辑也很正常
3、.fadeTo()
.fadeTo( duration, to, easing, callblack ) 多了一个参数to
duration 1500毫秒
to to是"到那"的意思（淡入到那）。运动到opacity:0.6时候，
easing 运动速率swing
callblack 运动到opacity:0.6时候，执行回调函数
$('p').on('click', function () {
if($(this).next().css('display') == 'none'){
$(this).next().fadeTo(1500, 0.6, 'swing', function(){
// console.log($(this).next().css('opacity'));
console.log($('ul').css('opacity'));
});
}else{
$(this).next().fadeTo(1500, 0.1, 'swing', function(){
console.log($(this).css('opacity'));
});
}
});三、滑动
.slideDown() 卷出
.slideUp() 卷入
.slideToggle()
1、卷入卷出
slide关注的是高度height，卷帘门效果
$('p').on('click', function () {
if($(this).next().css('display') == 'none'){
$(this).next().slideDown(1500, 'swing', function(){
console.log('卷出');
});
}else{
$(this).next().slideUp(1500, 'swing', function(){
console.log('卷人');
});
}
});2、.slideToggle()
$('p').on('click', function () {
$(this).next().slideToggle(3000, 'swing');
});