Jquery - 動畫原理與應用

My tip

如果看不到 codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

cdn

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js
https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js

index.html

<h2>Jquery 動態練習</h2>
<h3>1. hide/show</h3>
<div class="rect rect1"></div>
<button class="btn1">顯示</button>
<button class="btn1e">隱藏</button>
<h3>2. fadeIn/fadeOut</h3>
<div class="rect rect2"></div>
<button class="btn2">顯示</button>
<button class="btn2e">隱藏</button>
<h3>3. slideDown/slideUp</h3>
<div class="rect rect3">test<br />test2</div>
<button class="btn3">顯示</button>
<button class="btn3e">隱藏</button>
<h3>4. animate</h3>
<div class="rect rect4">test<br />test2</div>
<button class="btn4">顯示</button>
<button class="btn4e">隱藏</button>
<h3>5. velocity</h3>
<div class="rect rect5">test<br />test2</div>
<button class="btn5">顯示</button>
<button class="btn5e">隱藏</button>

style.sass

.rect
  width: 100px
  height: 100px
  border: 5px solid #000
  position: relative
.rect5
  transform: rotate(120deg)

script.js

$(".btn1").click(function () {
  $(".rect1").show(500);
});
$(".btn1e").click(function () {
  $(".rect1").hide(1000);
});
$(".btn2").click(function () {
  $(".rect2").fadeIn(500);
});
$(".btn2e").click(function () {
  $(".rect2").fadeOut(1000);
});
$(".btn3").click(function () {
  $(".rect3").slideDown(500);
});
$(".btn3e").click(function () {
  $(".rect3").slideUp(1000);
});
$(".btn4").click(function () {
  $(".rect4")
    .animate(
      {
        left: "200px",
        height: "50px",
      },
      {
        duration: 500,
      }
    )
    .animate({
      left: "+=100px",
    })
    .delay(1000)
    .animate(
      {
        left: "+=100px",
        backgroundColor: "red",
      },
      {
        duration: 500,
        complete: function () {
          console.log("i'm red");
          $(".rect4").text("載入完畢");
        },
      }
    )
    .animate({
      left: "+=100px",
    })
    .animate({
      width: "50px",
      height: "50px",
      borderRadius: "50%",
    })
    .animate(
      {
        left: "0px",
      },
      2000,
      "easeOutElastic"
    );
});

$(".btn5").click(function () {
  $(".rect5").velocity({
    translateX: "30px",
    rotateZ: ["45deg", "120deg"],
  });
  // {
  //   loop: true,
  //   delay: 500
  // }
});
$(".btn5e").click(function () {
  $(".rect5").velocity("reverse");
  // {
  //   loop: true,
  //   delay: 500
  // }
});

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁特效入門（JS/CANVAS）課程