【jQuery筆記】20200617

原創 Cool_breeze_ 2020-06-19 07:12

jQuery事件委託

  1. 什麼是事件委託

​ 請別人幫忙做事情，然後將做完的結果反饋給我們

在jQuery中，如果通過核心函數找到的元素不止一個，那麼在添加事件的時候，jQuery會遍歷所有找到的元素，給所有找到的元素添加事件。

jQuery移入移出事件

mouseover/mouseout事件，子元素被移入移出也會觸發父元素的事件

mouseenter/mouserleave事件，子元素被移入移出不會觸發父元素的事件（推薦使用）

電影排行榜案例

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 07:21:47
 * @LastEditTime: 2020-06-17 08:59:25
 * @FilePath: \代碼\35-電影排行榜下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>35-電影排行榜下</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 450px;
        margin: 50px auto;
        border: 1px solid #000;
      }
      .box > h1 {
        font-size: 20px;
        line-height: 35px;
        color: deeppink;
        padding-left: 10px;
        border-bottom: 1px dashed #ccc;
      }
      ul > li {
        list-style: none;
        padding: 5px 10px;
        border: 1px dashed #ccc;
      }
      ul > li:nth-child(-n + 3) span {
        background: deeppink;
      }
      ul > li > span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        margin-right: 10px;
      }
      .content {
        overflow: hidden;
        margin-top: 5px;
        display: none;
      }
      .content > img {
        width: 80px;
        height: 120px;
        float: left;
      }
      .content > p {
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
        line-height: 20px;
      }
      .current .content {
        display: block;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        /*
        // 1. 監聽鼠標移入事件
        $("li").mouseenter(function () {
          $(this).addClass("current");
        });

        // 2. 監聽鼠標移出事件
        $("li").mouseleave(function () {
          $(this).removeClass("current");
        });
        */

        $("li").hover(
          function () {
            $(this).addClass("current");
          },
          function () {
            $(this).removeClass("current");
          }
        );
      });
    </script>
  </head>
  <body>
    <div class="box">
      <h1>電影排行榜</h1>
      <ul>
        <li>
          <span>1</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
        <li>
          <span>2</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
        <li>
          <span>3</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
        <li>
          <span>4</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
        <li>
          <span>5</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
        <li>
          <span>6</span>電影名稱
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天聖八年，歲在庚午。是夜，許府中，下人發現員外離奇倒地身亡。前來尋員外的許夫人神情呆滯，居然同一美豔女子在屋內翩翩起舞。曲終，此女在衆人眼前瞬間消失。怪事一出，開封府派捕快拾生破案。拾生髮現許員外竟是中毒而亡，而後從夫人處得知那女子的身世，她就是二十二年前聽雨樓中名噪一時的歌妓謝曉菀，但已故去多年。
              調查陷入僵局，一切線索都直指謝曉菀，拾生毫無頭緒。爲安撫民心，他打算快速偵破案件，遂入隱市向白青蘿求助。藥婆白青蘿有一個靈鼻子，它能聞辨百毒，拾生想借此“聞香探案”。
              避世多時的白青蘿會輕易同意嗎？許府裏又藏着怎樣的祕密......
            </p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

TAB選項卡案例

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 09:01:22
 * @LastEditTime: 2020-06-17 10:49:18
 * @FilePath: \代碼\38-TAB選項卡終極.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>38-TAB選項卡終極</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 440px;
        height: 298px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      .nav {
        height: 50px;
      }
      .nav > li {
        list-style: none;
        width: 110px;
        height: 50px;
        background: orange;
        text-align: center;
        line-height: 50px;
        float: left;
      }
      .nav > .current {
        background: #ccc;
      }
      .content li {
        list-style: none;
        width: 440px;
        height: 250px;
        display: none;
      }
      /* .content li div {
        width: 440px;
        height: 250px;
        display: none;
      } */
      .content .show {
        display: block;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        // 1. 監聽選項卡的移入事件
        $(".nav>li").mouseenter(function () {
          // 1.1 修改被移入選項卡的背景顏色
          $(this).addClass("current");
          // 1.2 還原其他兄弟選項卡的背景顏色
          $(this).siblings().removeClass("current");
          // 1.3 獲取當前移入選項卡的索引
          var $index = $(this).index();
          // 1.4 根據索引找到對應的圖片
          var $li = $(".content li").eq($index);
          // 1.5 隱藏非當前的其他圖片
          $li.siblings().removeClass("show");
          // 1.6 顯示找到的圖片
          $li.addClass("show");
        });
      });
    </script>
  </head>
  <body>
    <div class="box">
      <ul class="nav">
        <li class="current">H5+C3</li>
        <li>jQuery</li>
        <li>C語言</li>
        <li>Go語言</li>
      </ul>
      <ul class="content">
        <li class="show" style="background: red;"></li>
        <li style="background: blue;"></li>
        <li style="background: yellow;"></li>
        <li style="background: green;"></li>
      </ul>
    </div>
  </body>
</html>

jQuery顯示和隱藏動畫

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>39-jQuery顯示和隱藏動畫</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            // $("div").css("display", "block");
            $("div").show(1000, function () {
              alert("顯示動畫執行完畢");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            // $("div").css("display", "none");
            $("div").hide(1000, function () {
              alert("隱藏動畫執行完畢");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").toggle(1000, function () {
              alert("切換完畢");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
  </body>
</html>

jQuery展開和收起動畫

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 11:23:57
 * @LastEditTime: 2020-06-17 11:46:00
 * @FilePath: \代碼\41-jQuery 展開和收起動畫.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>41-jQuery 展開和收起動畫</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 300px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            $("div").slideDown(1000, function () {
              alert("展開完畢");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            $("div").slideUp(1000, function () {
              alert("收起完畢");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").slideToggle(1000, function () {
              alert("切換完畢");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>展開</button>
    <button>收起</button>
    <button>切換</button>
    <div></div>
  </body>
</html>

摺疊菜單

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 12:21:17
 * @LastEditTime: 2020-06-17 13:19:56
 * @FilePath: \代碼\43-摺疊菜單下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>43-摺疊菜單下</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        list-style: none;
        width: 300px;
        margin: 100px auto;
      }
      .nav > li {
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2rem;
        position: relative;
      }
      .nav > li:last-child {
        border-bottom: 1px solid #000;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .nav > li:first-child {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }
      .nav > li > span {
        display: inline-block;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        position: absolute;
        right: 20px;
        top: 5px;
      }
      .nav > li > span span {
        position: absolute;
        top: 0;
        left: -20px;
      }
      .sub {
        display: none;
      }
      .sub > li {
        list-style: none;
        background: mediumpurple;
        border-bottom: 1px solid #fff;
      }
      .sub > li:hover {
        background: red;
      }
      .nav .current > span {
        transform: rotate(90deg);
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        // 1. 監聽一級菜單的點擊事件、
        $(".nav>li").click(function () {
          // 1.1 拿到二級菜單
          var $sub = $(this).children(".sub");
          // 1.2 讓二級菜單展開
          $sub.slideDown(1000);
          $(this).addClass("current");
          // 1.3 拿到所有非當前的二級菜單
          var otherSub = $(this).siblings().children(".sub");
          // 1.4 讓所有非當前的二級菜單收起
          otherSub.slideUp(1000);
          $(this).siblings().removeClass("current");
        });
      });
    </script>
  </head>
  <body>
    <ul class="nav">
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>
        一級菜單<span><span>></span></span>
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

下拉菜單

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 13:20:40
 * @LastEditTime: 2020-06-17 13:37:57
 * @FilePath: \代碼\44-下拉菜單.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>44-下拉菜單</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        list-style: none;
        width: 300px;
        height: 50px;
        background: red;
        margin: 100px auto;
      }
      .nav > li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        float: left;
      }
      .sub {
        list-style: none;
        background: mediumpurple;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        /*
            在jQuery中如果需要執行動畫，建議在執行動畫之前先調用stop方法，然後再執行動畫
          */
        // 1. 監聽一級菜單的移入事件
        $(".nav>li").mouseenter(function () {
          // 1.1 拿到二級菜單
          var $sub = $(this).children(".sub");
          // 停止當前正在運行的動畫
          $sub.stop();
          // 1.2 讓二級菜單展開
          $sub.slideDown(1000);
        });
        // 2. 監聽一級菜單的移出事件
        $(".nav>li").mouseleave(function () {
          // 2.1 拿到二級菜單
          var $sub = $(this).children(".sub");
          // 停止當前正在運行的動畫
          $sub.stop();
          // 2.2 讓二級菜單收起
          $sub.slideUp(1000);
        });
      });
    </script>
  </head>
  <body>
    <ul class="nav">
      <li>
        一級菜單
        <ul class="sub">
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
          <li>二級菜單</li>
        </ul>
      </li>
      <li>一級菜單</li>
      <li>一級菜單</li>
    </ul>
  </body>
</html>

jQuery淡入淡出動畫

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 13:39:23
 * @LastEditTime: 2020-06-17 13:47:19
 * @FilePath: \代碼\45-jQuery淡入淡出動畫.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>45-jQuery淡入淡出動畫</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            $("div").fadeIn(1000, function () {
              alert("淡入完畢");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            $("div").fadeOut(1000, function () {
              alert("淡出完畢");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").fadeToggle(1000, function () {
              alert("切換完畢");
            });
          });
        $("button")
          .eq(3)
          .click(function () {
            $("div").fadeTo(1000, 0.5, function () {
              alert("淡入到完畢");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切換</button>
    <button>淡入到</button>
    <div></div>
  </body>
</html>

彈窗廣告

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 14:17:36
 * @LastEditTime: 2020-06-17 14:29:08
 * @FilePath: \代碼\46-彈窗廣告.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .ad {
        position: fixed;
        right: 0;
        bottom: 0;
        display: none;
      }
      .ad > span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: red;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        // 1. 監聽span的點擊事件、
        $("span").click(function () {
          $(".ad").remove();
        });

        // 2. 執行廣告動畫
        // $(".ad").slideDown(1000, function () {
        //   $(".ad").delay(5000);
        //   $(".ad").fadeOut(3000);
        // });

        $(".ad").slideDown(1000).delay(5000).fadeOut(3000);
      });
    </script>
  </head>
  <body>
    <div class="ad">
      <img src="images/BB14xSko.jpg" alt="" />
      <span></span>
    </div>
  </body>
</html>

jQuery自定義動畫

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 14:30:58
 * @LastEditTime: 2020-06-17 14:56:58
 * @FilePath: \代碼\47-jQuery自定義動畫.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>47-jQuery自定義動畫</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background: red;
      }
      .two {
        background: blue;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            /*
            $(".one").animate(
              {
                width: 500,
              },
              1000,
              function () {
                alert("自定義動畫執行完畢");
              }
            );
            */
            $(".one").animate(
              {
                marginLeft: 500,
              },
              5000,
              function () {}
            );
            /*
              第一個參數：接收一個對象，可以在對象中修改屬性
              第二個參數：指定動畫時長
              第三個參數：指定動畫節奏，默認爲swing
              第四個參數：動畫執行完畢之後的回調函數
            */
            $(".two").animate(
              {
                marginLeft: 500,
              },
              5000,
              "linear",
              function () {}
            );
          });
        $("button")
          .eq(1)
          .click(function () {
            $(".one").animate(
              {
                width: "+=100",
              },
              1000,
              function () {}
            );
          });
        $("button")
          .eq(2)
          .click(function () {
            $(".one").animate(
              {
                // width: "hide",
                width: "toggle",
              },
              1000,
              function () {}
            );
          });
      });
    </script>
  </head>
  <body>
    <button>操作屬性</button>
    <button>累加屬性</button>
    <button>關鍵字</button>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

jQuery的stop和delay方法

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 14:58:28
 * @LastEditTime: 2020-06-17 15:19:02
 * @FilePath: \代碼\48-jQuery的stop和delay方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>48-jQuery的stop和delay方法</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .one {
        width: 100px;
        height: 100px;
        background: red;
      }
      .two {
        width: 500px;
        height: 10px;
        background: blue;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            /*
             在jQuery的{}中可以同時修改多個屬性，多個屬性的動畫也會同時執行
             */
            /*
            $(".one").animate(
              {
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 500,
              },
              1000
            );
            */
            /*
            $(".one")
              .animate(
                {
                  width: 500,
                },
                1000
              )
              .delay(2000)
              .animate(
                {
                  height: 500,
                },
                1000
              );
              */

            $(".one").animate(
              {
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                width: 100,
                // height: 500,
              },
              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>
  </head>
  <body>
    <button>開始動畫</button>
    <button>停止動畫</button>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

圖標特效

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 15:21:54
 * @LastEditTime: 2020-06-17 17:20:00
 * @FilePath: \代碼\49-圖標特效.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>49-圖標特效</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 400px;
        height: 250px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      ul > li {
        width: 100px;
        height: 50px;
        margin-top: 50px;
        text-align: center;
        float: left;
        overflow: hidden;
      }
      ul > li > span {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: red;
        position: relative;
        /* top: 50px; */
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        // 2. 監聽li移入事件
        $("li").mouseenter(function () {
          // 2.1 將圖標往上移動
          $(this)
            .children("span")
            .animate(
              {
                top: -50,
              },
              1000,
              function () {
                // 2.2 將圖片往下移動
                $(this).css("top", "50px");
                // 2.3 將圖片復位
                $(this).animate(
                  {
                    top: 0,
                  },
                  1000
                );
              }
            );
        });
      });
    </script>
  </head>
  <body>
    <ul>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
    </ul>
  </body>
</html>

無限循環滾動案例

<!--
 * @Author: 碼小余
 * @Date: 2020-06-17 17:23:12
 * @LastEditTime: 2020-06-17 18:31:49
 * @FilePath: \代碼\51-無限循環滾動下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>50-無限循環滾動</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 600px;
        height: 161px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }
      ul {
        list-style: none;
        width: 1800px;
        height: 161px;
        background: #000;
      }
      ul > li {
        width: 300px;
        height: 161px;
        background: yellow;
        font-size: 50px;
        float: left;
        text-align: center;
        line-height: 161px;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 編寫jQuery代碼
      $(function () {
        // 0. 定義變量保存偏移位
        var offset = 0;
        // 1. 讓圖片滾動起來
        var timer;
        function autoPlay() {
          timer = setInterval(function () {
            offset -= 1;
            if (offset <= -1200) {
              offset = 0;
            }
            $("ul").css("marginLeft", offset);
          }, 1);
        }
        autoPlay();
        // 2. 監聽li的移入移除事件
        $("li").hover(
          function () {
            // 停止滾動
            clearInterval(timer);
            // 給非當前選中添加蒙版
            $(this).siblings().fadeTo(100, 0.5);
            // 去除當前選中的蒙版
            $(this).fadeTo(100, 1);
          },
          function () {
            // 繼續滾動
            autoPlay();
            // 去除所有的蒙版
            $("li").fadeTo(100, 1);
          }
        );
      });
    </script>
  </head>
  <body>
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

16張圖解鎖Spring的整體脈絡

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

4ye 2021-12-04 13:03:55

JavaScript 瀏覽器統治地位不保？Python 有望取代

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-02 17:58:57

分享8個可以編譯爲JavaScript的語言

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

devpoint 2021-12-01 18:44:00

2021 最佳開源軟件榜單出爐，Flutter、StreamNative 上榜

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-12-01 11:18:54

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

Angular 13 發佈：全面棄用 View Engine

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-11-05 17:43:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

看完 Jamstack 的調查報告，我抓住了最新的 Web 流行趨勢

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-10-13 17:13:59

開發者眼中的 HarmonyOS 遊戲生態：有紅利也有挑戰

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

罗燕珊 2021-09-22 12:13:51

邊緣服務的一致性、耦合和複雜性

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

Glenn Engstrand 2021-09-08 15:08:54

技術人最愛Rust，最怕COBOL，工程經理最高薪，懂Clojure最賺錢 | 2021全球開發者報告

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"概述"}]},{"t

Stack Overflow 2021-08-09 14:38:55

深入學習 React 合成事件

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

微医大前端技术 2021-07-31 20:03:59

如何從 0 到 1 搭建性能檢測系統

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

政采云前端团队 2021-07-31 17:03:58

你不知道的 TypeScript 高級技巧

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

微医大前端技术 2021-07-31 11:03:58