jq 动画

最新推荐文章于 2024-05-15 12:02:42 发布

哈哈绝

最新推荐文章于 2024-05-15 12:02:42 发布

阅读量650

点赞数

分类专栏： jq 学习笔记文章标签： jq 动画

本文链接：https://blog.csdn.net/qq_41194704/article/details/103371663

版权

学习笔记同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

jq 动画

jq动画
所有的jq动画都在一个运动队列中，一个运动走完再走下一个
jq常用动画
toggle（）、fadeToggle（）、slideToggle（）会自动判断当前元素状态。
例如当前元素为隐藏时，调用toggle 就是显示，反之则是隐藏

动画	效果
show（）	显示
hide（）	隐藏
toggle（）	在显示隐藏之间切换
fadeIn（）	渐入
fadeOut（）	渐出
fadeToggle（）	在渐入渐出之间切换
slideUp（）	滑上
slideDown（）	滑下
slideToggle（）	在滑上和滑下之间切换

jq 自定义动画
参数一：对象要运动的样式，和对象的目标点必须为对象形式
参数二：运动的时间默认为400ms 单位为ms
参数三：运动的样式 swing（缓冲的，慢快慢）、linear（匀速的），默认为swing
参数四：回调函数，运动结束后的回调
停止动画

动画	效果	参数
stop（）	停止当前运动，不会影响后续运动，直接执行后续运动	无
stop（）	停止后续所有运动	true
stop（）	指定到当前运动的目标点，有动画过程	true，true
finish（）	立即到运动的目标点，没有动画过程	无

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        /* display: none; */
      }

      #box2 {
        width: 200px;
        height: 200px;
        background: blue;
        position: absolute;
        top: 200px;
        display: none;
      }
    </style>
    <script src="./jquery-3.4.1.js"></script>
  </head>
  <body>
    <button id="btn1">点击</button>
    <button id="btn2">停止</button>
    <div id="box1"></div>
    <div id="box2"></div>

    <script>
      //jq 动画
      //show() hide() toggle()  显示 隐藏  在显示与隐藏之间切换
      //show、hide、toggle 修改的是 width、height、opacity
      //toggle() 会自动判断元素状态

      // $('#btn1').on('click',function(){
      //     // $('#box1').show();
      //     $('#box1').toggle();
      // })

      //fadeIn() fadeOut() fadeToggle() 渐入、渐出 在渐入和渐出之间切换
      //fadeIn() fadeOut() fadeToggle() 修改的是opacity
      //动画默认时间 400ms 动画默认不是匀速运动
      //fadeToggle() 会自动判断元素状态

      // $('#btn2').on('click',function(){
      //     // $('#box2').fadeIn()
      //     $('#box2').fadeToggle();
      // })

      //slideUp() slideDown() slideToggle() 滑上、滑下、在滑上、滑下之间切换
      //slideUp()、slideDown()、slideToggle() 修改的是height

      // $('#btn1').on('click',function(){
      //     // $('#box1').slideDown()
      //     $('#box1').slideToggle()
      // })

      //jq 自定义动画 animate()
      //参数一：对象要运动的样式，和要运动的目标点 必须为对象
      //参数二：时间 单位 ms 默认400
      //参数三：运动的样式 默认 swing(缓冲的、慢快慢) linear(匀速) //必须加引号
      //参数四：回调函数 ，运动结束的回调

      // $("#btn1").on("click", function() {
      //   $("#box1").animate(
      //     {
      //       left: 300
      //     },3000,"linear",function() {
      //       $(this).animate({ top: 300 });
      //     }
      //   );
      // });

      $("#btn1").on("click", function() {  
        $("#box1").animate({left:300},1000).animate({top:300})
      });

      //停止动画 stop
      $("#btn2").on("click", function() {
         $('#box1').stop() //默认，停止当前运动，不会影响后续运动 
        //  $('#box1').stop(true); //停止后续的所有运动
        // $('#box1').stop(true,true) // 指定到当前运动的目标点 有动画过程
        // $('#box1').finish(); //立即到运动的目标点 没有动画过程
      });

      //所有的jq动画都在一个运动队列中，一个运动走完再走下一个

      //hover()  相当于 mouseover() mouseout() 可以有两个回调函数，两个函数用逗号隔开
      $("#box1").hover(
        function() {
          console.log("over");
        },
        function() {
          console.log("out");
        }
      );
    </script>
  </body>
</html>