jQuery 动画用法

jQuery动画：

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="显示">
  <input type="button" value="隐藏">
  <div></div>
</body>

　　1.jQuery.show()和jQuery.hide() 显示与隐藏

  <script>
    /* 1.jQuery.show()和jQuery.hide() 显示与隐藏
　　　　a.不传参数，没有动画效果，show()：直接显示 hide()：直接隐藏，比较常用
　　　　b.show(speed)和hide(speed)
　　　　　　speed:动画的持续时间 ，可以是毫秒值 ，还可以是固定字符串
　　　　　　fast:200ms normal:400ms slow:600ms
　　　　c.show([speed], [callback])和hide([speed],[ callback])
　　　　　　[ ]中括号表示可选择参数，并非表示数组
　　　　　　callback: 回调函数 */
    $(function () {
      $("input").eq(0).click(function () {
        $("div").show(1000, function () {
          console.log("哈哈，动画执行完成啦");
        })
      });
      $("input").eq(1).click(function () {
        $("div").hide();
      })
    });
  </script>

　　2.滑入滑出动画

  <script>
    $(function () {
      //滑入（slideDown）  滑出：slideU
      //     jQuery.slideDown()滑入动画:从上往下显示
      // 　　　　jQuery.slideUp()滑出动画:从下往上隐藏
      // 　　　　jQuery.slideToggle()如果是滑入状态，就执行滑出的动画，如果是滑出状态，则不操作
      // 　　　　　　用法和jQuery.show()和jQuery.hide()用法一样，
      // 　　　　不同是如果不传speed参数，默认为normal
      $("input").eq(0).click(function () {
        $("div").slideDown(1000, function () {
          console.log("额呵呵");
        });
      });
      $("input").eq(1).click(function () {
        $('div').slideUp();
      })
      $("input").eq(2).click(function () {
        //如果是滑入状态，就执行滑出的动画，
        $('div').slideToggle();
      })
    });
  </script>

　　3.淡入淡出动画

<script>
    $(function () {
      //淡入：fadeIn  淡出：fadeOut    切换：fadeToggle
      //jQuery.fadeIn()淡入动画
      //jQuery.fadeOut()淡出动画
      //jQuery.fadeToggle()如果是淡入状态，就执行淡出动画，如果为淡出状态，则不操作
      　　//用法和jQuery.show()和jQuery.hide()用法一样，
      　　//不同是如果不传speed参数，默认为normal
      $("input").eq(0).click(function () {
        $("div").fadeIn(2000);
      });
      $("input").eq(1).click(function () {
        $("div").fadeOut(1000);
      })
      $("input").eq(2).click(function () {
        //如果是滑入状态，就执行滑出的动画，
        $('div').fadeToggle();
      })
    });
  </script>

 

 

4.自定义动画

jQuery.animate(json,speed,easing, callback);

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
    #box2 {
      background-color: blue;
      margin-top: 150px;
    }

    #box3 {
      background-color: yellowgreen;
      margin-top: 300px;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      //第一个参数：对象，里面可以传需要动画的样式
      //第二个参数：speed 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });
</script>
</body>
</html>