jQuery 动画 | 易学教程

1 基本效果

hide() 隐藏
show() 显示
toggle() 隐藏显示来回切换
基本效果的CSS属性变化：透明度变化，元素大小相关的样式（padding，border，width/height），外边距（margin）

2 滑动效果

slideDown() 显示
slideUp() 隐藏
slideToggle() 切换
垂直方向上的变化 height / padding-top / margin-top

3 淡入淡出效果

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
透明度的变化（渐变）

4 自定义动画

animate({}, speed, fn) 自定义动画
stop() 使动画停止
finish() 使动画完成
delay() 延迟动画的执行

5 动画设置

jQuery.fx.off 动画开关
jQuery.fx.interval jQuery动画的帧数

1-5 demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 动画</title>
  <style>
    #box,#box1 {
      padding: 20px;
      width: 400px;
      height: 300px;
      background-color: #333;
      overflow: hidden;
    }
    #box img{
      width: 400px;
    }
  </style>
</head>
<body>
  <h1>jQuery 动画</h1>
  <hr>
  <button id="btn0">hide</button>
  <button id="btn1">show</button>
  <button id="btn2">toggle</button>
  <button id="btn3">slideUp</button>
  <button id="btn4">slideDown</button>
  <button id="btn5">slideToggle</button>
  <button id="btn6">fadeOut</button>
  <button id="btn7">fadeIn</button>
  <button id="btn8">fadeToggle</button>
  <button id="btn9">fadeTo</button>
  <br>
  <br>
  <div id="box">
    <img src="http://b-ssl.duitang.com/uploads/item/201507/13/20150713153609_YKU8V.jpeg" alt="">
  </div>
  <hr>
  <br>
  <button id="btn00">自定义动画00</button>
  <button id="btn01">自定义动画01</button>
  <button id="btn02">stop</button>
  <button id="btn03">finish</button>
  <button id="btn04">delay</button>
  <br>
  <br>
  <div id="box1"></div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    // 动画设置
    // 关闭页面中所有的动画
    // jQuery.fx.off = true;

    console.log("jQuery 动画的帧数：" + $.fx.interval);

    $(document).ready(function () {
      $("#btn0").click(function () {
        // $("#box").hide();
        // $("#box").hide("fast");
        // $("#box").hide("norma");
        // $("#box").hide("slow");
        // 还可以用数字 单位毫秒
        $("#box").hide(1000, function () {
          console.log("隐藏完了还可以执行回调函数");
        });
      });
      $("#btn1").click(function () {
        $("#box").show(1000);
      });

      $("#btn2").click(function () {
        $("#box").toggle(1000);
      });

      $("#btn3").click(function () {
        $("#box").slideUp(1000, function () {
          console.log("slideUp");
        });
      });

      $("#btn4").click(function () {
        $("#box").slideDown(1000);
      });

      $("#btn5").click(function () {
        $("#box").slideToggle(1000);
      });

      $("#btn6").click(function () {
        $("#box").fadeOut(1000);
      });

      $("#btn7").click(function () {
        $("#box").fadeIn(1000);
      });

      $("#btn8").click(function () {
        $("#box").fadeToggle(1000);
      });

      $("#btn9").click(function () {
        // fadeTo后面必须要带两个参数，第一个是时间，第二个是透明度，0到1之间，第三个参数还是回调函数
        $("#box").fadeTo(1000, .5);
      });

      $("#btn00").click(function () {
        $("#box1").animate({
          "width": "100px",
          "border-radius": "10px"
        }, 1000);
      });

      $("#btn01").click(function () {
        $("#box1").animate({
          "width": "toggle",
          "height": "toggle",
          "border-radius": "10px"
        }, 1000, function () {
          console.log("回调函数");
        });
      });

      $("#btn02").click(function () {
        $("#box1").stop();
      });

      $("#btn03").click(function () {
        $("#box1").finish();
      });

      $("#btn04").click(function () {
        // $("#box1").hide(1000).show(1000);
        $("#box1").hide(1000).delay(3000).show(1000);// 延迟3秒钟再显示
      });
    });
  </script>
</body>
</html>