jQuery 动画

一、基本特效

.hide() 展示

.show() 隐藏

.toggle() 切换显示/隐藏

1、显示和隐藏

鼠标移入 p 标签 ul 标签显示，鼠标移出整体的 div 标签 ul 隐藏

<!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标签，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()

卷入卷出

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('卷人');
    });
  }
});