jQuery（五）--自定义动画、动画

小白小白从不日白

已于 2022-05-21 01:30:37 修改

阅读量3.4k

点赞数 2

分类专栏： jQuery 文章标签： javascript jquery

于 2021-05-02 20:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/116352434

版权

jQuery 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

一、自定义动画

1.1 animate()

1.2 animate()动画执行顺序

1.3 animate()动画回调函数和匀速运动

1.4 animate动画之stop()/delay()

二、动画

2.1 show()/hide()/toggle()

2.2 slideDown()/slideUp()/slideToggle()

2.3 fadeIn()/fadeOut()/fadeTo()/fadeToggle()

一、自定义动画

1.1 animate()

描述：jq对象的自定义动画

语法：jq对象.animate(JSON格式的参数，动画执行时间ms，["linear"/"swing"]，fn)

参数：它有四个参数

第一个参数是JSON，表示动画的终点（就是这个函数要变成什么样子）即CSS样式
第二个参数是动画执行完毕所需的时间
第三个参数是指定动画节奏，也就是速度变化，比如：linear
第四个参数是自定义动画执行完毕之后的回调函数

注意：即使只有一个属性发生动画，也要写JSON，而不能写k,v形式

例如：

<script>
    $("div").animate({"left": 300,"top": 200,"right": 50},2000,function() {
                //自定义动画执行完毕之后的回调函数
            });
</script>

例子1：

公共部分：

 <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
</style>

<div></div>

<script>
        $('div').click(function() {
            // 向右移动
            $(this).animate({
                    "left": 800,
                     // "width": "hide/toggle", 关键字
                    "width": "200px",
                    "height": "200px",
                    "top": 100
                }, 2000)
                .animate({ //向左移动
                    "left": 0,
                    "width": "100px",
                    "height": "100px",
                    "top": 0,
                    "opacity": 0.5
                }, 2000);
        })
</script>

当点击div区域后：

局限性：animate()能够改变的是量化的属性

例子：

 <script>
        $("div").animate({
            "background-color": "blue"
        }, 2000);
 </script>

执行结果发现div的背景颜色并没有在2秒钟内发生一个动画变化。所以很显然jQuery对于相当一部分的属性是不能够进行动画的。至少现在不行。而我们今天并不关心什么属性能动画，我们关心的是不能变化的属性：background-color、background-position不能参与动画！！！
jQuery能够改变的属性都是数值型的，比如width、height、font-size、opacity等

1.2 animate()动画执行顺序

jq中动画的执行遵循两大原则：

公共部分：

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute
        }
        
        .div2 {
            top: 150px;
        }
</style>

    <div class="div1"></div>
    <div  class="div2"></div>

同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行

 <script>
        $('div').animate({
                "left": 800
            }, 2000)
            .animate({
                "width": 200
            }, 2000)
            .animate({
                "height": 200
            }, 2000);
 </script>

异步原则：不同元素如果存在多个animate命令，则他们同时执行

 <script>
        $('.div1').animate({
            "left": 800
        }, 2000);
        $('.div2').animate({
            "left": 800
        }, 2000);
 </script>

注意：

对于一个jq对象而言，一个animate完成动画效果和多个animate分别完成动画效果完全不等价

 <script>
        //执行2000ms
        $('div').animate({
            "left": 800,
            "width": 200,
            "height": 200
        }, 2000);

        //不等价
        //执行6000ms
        $('div').animate({
                "left": 800
            }, 2000)
            .animate({
                "width": 200
            }, 2000)
            .animate({
                "height": 200
            }, 2000);
</script>

例子：

<script>
        $('div').animate({
                "left": 800
            }, 600)
            .animate({
                "top": 400
            }, 600)
            .animate({
                "left": 100
            }, 600)
            .animate({
                "top": 100
            }, 600)
            .slideUp()
            .fadeIn();
</script>

1.3 animate()动画回调函数和匀速运动

公共部分：

     <script src="js/jquery-1.12.3.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute
        }
        
        .div2 {
            top: 150px;
        }
    </style>

    <div class="div1"></div>
    <div class="div2"></div>

1.回调函数(可选参数)

描述：表示animate执行完之后，要干什么

在回调函数中 $(this) 指的是运动的对象

<script>
        $('div').animate({
            "left": 800
        }, 5000, function() {
            $(this).css("background-color", "blue");
        });
</script>

2.匀速运动（可选参数）

描述：jQuery的运动不是匀速的，而是先加速然后到终点缓慢减速。

那么我们如果想进行匀速运动，就需要加一个参数叫做"linear"(线性的)。

  <script>
        $('.div1').animate({
            "left": 800
        }, 3000, function() {
            $(this).css("background-color", "blue");
        });
        $('.div2').animate({
            "left": 800
        }, 3000, "linear", function() {
            $(this).css("background-color", "blue");
        });
  </script>

1.4 animate动画之stop()/delay()

公共部分：

<script src="js/jquery-1.8.3.js"></script>

       * {
            margin: 0;
            padding: 0;
        }
        
        .one {
            width: 100px;
            height: 100px;
            background: orange;
        }
        
        .two {
            width: 500px;
            height: 10px;
            background: #f40;
        }

    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>

1.4.1 delay()

用于高速度系统动画延迟时长

        $(function() {
            $("button").eq(0).click(function() {
                $(".one").animate({
                    width: 400,
                }, 1000).delay(1000).animate({
                    height: 260
                });
            });

            $("button").eq(1).click(function() {});
        });

1.4.2 stop()

stop(clearAllAnimation,goToEnd)

说明：

第一个参数表示是否清除所有动画，默认为false表示不清除所有动画（只清除当前动画）
第二个参数表示是否瞬间完成当前动画（达到动画结束的状态），默认为false表示不立即完成当前动画

        $(function() {
            $("button").eq(0).click(function() {
                $(".one").animate({
                    width: 400,
                }, 1000)
                $(".one").animate({
                    height: 260
                }, 1000)
                $(".one").animate({
                    width: 100,
                }, 1000)
                $(".one").animate({
                    height: 100,
                }, 1000);
            });

            $("button").eq(1).click(function() {
                // $("div").stop(); //立即停止当前动画，继续执行后续动画

                // $("div").stop(false); //立即停止当前动画，继续执行后续动画

                // $("div").stop(false, false); //立即停止当前动画，继续执行后续动画

                // $("div").stop(true); //立即停止当前和后续所有的动画

                // $("div").stop(true, false); //立即停止当前和后续所有的动画

                // $("div").stop(false, true); //立即停止当前动画，继续执行后续动画

                $("div").stop(true, true); //立即完成当前动画，并且停止后续动画
            });
        });

二、动画

<script src="js/jquery-1.8.3.js"></script>

2.1 show()/hide()/toggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").toggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

2.2 slideDown()/slideUp()/slideToggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }

    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>

        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").slideDown(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").slideUp(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").slideToggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

2.3 fadeIn()/fadeOut()/fadeTo()/fadeToggle()

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 300px;
            background: red;
            display: none;
        }

    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>

        $(function() {
            //淡入
            $("button").eq(0).click(function() {
                $("div").fadeIn(1000, function() {});
            });

            //淡出
            $("button").eq(1).click(function() {
                $("div").fadeOut(1000, function() {});
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").fadeToggle(1000, function() {});
            });

            //淡入到
            $("button").eq(3).click(function() {
                $("div").fadeTo(1000, 0.5, function() {});
            });
        });

轮播图示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      ul,
      li {
        list-style: none;
      }

      /* 轮播图 */
      .banner {
        width: 650px;
        height: 360px;
        margin: 20px auto;
        overflow: hidden;
        position: relative;
      }

      .banner ul {
        width: 4000px;
        height: 360px;
        display: flex;
      }

      .banner > img {
        vertical-align: bottom;
      }

      /* 左右切换按钮 */
      .toggle {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
      }

      /* 设置左右按钮的样式 */
      .toggle span {
        display: inline-block;
        width: 30px;
        height: 60px;
        background: rgba(0, 0, 0, 0.5);
        line-height: 60px;
        text-align: center;
        font-size: 40px;
        color: #fff;
      }

      /* 设置左右按钮的 hover 效果 */
      .toggle span:hover {
        cursor: pointer;
        background: rgb(231, 140, 20);
      }

      /* 指示点 */
      .point {
        width: 50%;
        height: 20px;
        position: absolute;
        bottom: 20px;
        left: 45%;
        z-index: 999;
        display: flex;
        justify-content: space-between;
      }

      .point div {
        width: 10%;
        height: 20px;
        background-color: aquamarine;
        border-radius: 10px;
        cursor: pointer;
      }
      .point .active {
        background-color: #f40;
        width: 15%;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <ul class="ul">
        <li><img src="images/beijing/0.jpg" alt="" /></li>
        <li><img src="images/beijing/1.jpg" alt="" /></li>
        <li><img src="images/beijing/2.jpg" alt="" /></li>
        <li><img src="images/beijing/3.jpg" alt="" /></li>
        <li><img src="images/beijing/4.jpg" alt="" /></li>
        <li><img src="images/beijing/0.jpg" alt="" /></li>
      </ul>
      <!-- 左右切换按钮 -->
      <div class="toggle">
        <span id="pre">&lt;</span>
        <span id="next">&gt;</span>
      </div>
      <!-- 指示点 -->
      <div class="point">
        <div data-id="0" class="active"></div>
        <div data-id="1"></div>
        <div data-id="2"></div>
        <div data-id="3"></div>
        <div data-id="4"></div>
      </div>
    </div>

    <script src="../Jquery/jquery-3.6.0.js"></script>
    <script>
      // 0. 用来表示目前正在查看的图片序号
      let index = 0;

      // 1. 设置定时器，让 ul 在 1000ms 内向左移动一定距离
      let timer = setInterval(lunbo, 1000);

      //   封装轮播函数
      function lunbo() {
        // 当前轮播图片为最后一张时，让当前的图片变为第一张即index=0
        index++;
        let left = -index * 650 + "px";

        // 将所有的 div 都恢复为原来的背景色
        $(".point div")
          .css("backgroundColor", "aquamarine")
          .animate({ width: "10%" }, 100);
        // 通过 index 去设置当前 指示点 的背景颜色
        $(`.point div:eq(${index == 5 ? 0 : index})`)
          .css("backgroundColor", "#f40")
          .animate({ width: "15%" }, 100);

        /**
         * 当 index 为 4 时，我们需要正常去进行加加，加到5
         * 使其切换到下一张，切换到下一张这个动画效果在完毕之后
         * 我们应该使整个ul的margin-left变为0
         */
        $(".ul").animate({ marginLeft: left }, 500, function () {
          if (index == 5) {
            $(".ul").css("marginLeft", "0px");
            index = 0;
          }
        });
      }

      /**
       * 2.
       * 当鼠标移动到图片上时，图片暂停轮播
       * 当鼠标移开时，轮播继续
       */
      $(".banner").mouseenter(function () {
        clearInterval(timer);
      });
      $(".banner").mouseleave(function () {
        timer = setInterval(lunbo, 1000);
      });

      /**
       * 3.
       * 给指示点添加点击事件
       */
      $(".point div").click(function () {
        let id = parseInt($(this).attr("data-id"));
        //  将 id 赋值给 index，这样下一张的切换才能接着上一张进行
        index = id;
        let left = -index * 650 + "px";
        $(".ul").animate({ marginLeft: left }, 500);
        // 将所有的 div 都恢复为原来的背景色
        $(".point div")
          .css("backgroundColor", "aquamarine")
          .animate({ width: "10%" }, 100);
        // 通过 index 去设置当前 指示点 的背景颜色
        // $(`.point div:eq(${index})`).css(
        //   "backgroundColor",
        //   "#f40"
        // ); 或
        $(this).css("backgroundColor", "#f40").animate({ width: "15%" }, 100);
      });

      /**
       * 4. 点击 左 按钮进行切换
       */
      $("#pre").click(function () {
        index--;
        // console.log(index); // -1

        if (index < 0) {
          index = 4;
          $(".ul").css("marginLeft", (-index * 650) + "px" );
        }

        let left = -index * 650 + "px";
        $(".ul").animate({ marginLeft: left }, 500);
        $(".point div")
          .css("backgroundColor", "aquamarine")
          .animate({ width: "10%" }, 100);
        $(`.point div:eq(${index})`)
          .css("backgroundColor", "#f40")
          .animate({ width: "15%" }, 100);
      });

      /**
       * 5. 点击 右 按钮进行切换
       */
      $("#next").click(function () {
        index++;

        if (index == 5) {
          $(".ul").css("marginLeft", "0px");
          index = 0;
        }

        let left = -index * 650 + "px";
        $(".ul").animate({ marginLeft: left }, 500);
        $(".point div")
          .css("backgroundColor", "aquamarine")
          .animate({ width: "10%" }, 100);
        $(`.point div:eq(${index})`)
          .css("backgroundColor", "#f40")
          .animate({ width: "15%" }, 100);
      });
    </script>
  </body>
</html>