การใช้ animate() ใน jQuery

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้ animate() ใน jQuery

การใช้ animate() ใน jQuery

by Parichat » 11/01/2018 2:34 pm

Method animate() คือวิธีการใช้การเคลื่อนไหวแบบกำหนดเองของ CSS

รูปแบบการเขียนไวยากรณ์หลัก(Syntax)
(selector).animate({styles},speed,easing,callback)
  • styles เราจำเป็นต้องใช้เพื่อที่จะระบุคุณสมบัติหรือค่าของ CSS อย่างน้อยหนึ่งค่าเพื่อให้มันทำงานได้
    Styles เราสามารถนำมาใส่ได้ เช่น padding, bottom, textIndent, margin, backgroundPositionX เป็นต้น
    speed คือ การระบุความเร็วของภาพเคลื่อนไหว จะกำหนดให้ "slow" หรือ "fast" ก็ได้
    easing คือ การระบุความเร็วขององค์ประกอบในจุดต่างๆของภาพเคลื่อนไหว โดยจำกำหนดให้เป็น "swing" เคลื่อนที่ช้าลงในจุดเริ่มต้นหรือจุดสิ้นสุดแต่ตรงกลางจะเร็ว หรือกำหนดให้เป็น "linear" เคลื่อนที่ด้วยความเร็วคงที่
    callback คือ ฟังก์ชันที่จะเรียกใช้หลังจากที่ภาพเคลื่อนไหวเสร็จสิ้น
รูปแบบการเขียนไวยากรณ์หลัก
(selector).animate({styles},{options})
  • styles คือ ระบุ Styles หรือตัว CSSลงไปเพื่อให้ดูสวยงาม
    options คือ ระบุตัวเลือกเพิ่มเติมสำหรับภาพเคลื่อนไหว
    • duration: การกำหนดความเร็วของภาพเคลื่อนไหว
      easing: การระบุฟังก์ชั่นที่ง่ายต่อการใช้งาน
      complete: การระบุฟังก์ชั่นที่จะทำหลังจากการเคลื่อนไหวเสร็จ
      step: ระบุฟังก์ชันที่จะเรียกใช้สำหรับแต่ละขั้นตอนในภาพเคลื่อนไหว
      progress: ระบุฟังก์ชันที่จะเรียกใช้หลังจากแต่ละขั้นตอนในภาพเคลื่อนไหว
      queue: ค่าบูลีน (Boolean value)ระบุว่าจะวางภาพเคลื่อนไหวในคิวเอฟเฟ็กต์หรือไม่
      specialEasing: เลือกคุณสมบัติของ CSS อย่างน้อยหนึ่งคุณสมบัติจาก พารามิเตอร์ Styles และให้สอดคล้องกับฟังก์ชั่น Easing ด้วย
      start: ระบุฟังก์ชันที่จะเรียกใช้เมื่อเริ่มต้นการเคลื่อนไหว
      done: ระบุฟังก์ชันที่จะเรียกใช้เมื่อสิ้นสุดการเคลื่อนไหว
      fail: ระบุฟังก์ชันที่จะเรียกใช้หากการเคลื่อนไหวไม่เสร็จสมบูรณ์
      always: ระบุฟังก์ชันที่จะเรียกใช้ถ้าภาพเคลื่อนไหวหยุดลงโดยไม่ได้ทำ
ตัวอย่าง

Code: Select all

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--Button-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height: "500px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height: "200px"});
    });
});
</script>
</head>
<body>

<button id="btn1" class="btn btn-info">ทำให้สูง</button>
<button id="btn2" class="btn btn-danger">ยกเลิก ความสูง</button>

<div id="box" style="background:#66e0ff;height:200px;width:200px;margin:10px;"></div>

</body>
</html>
ผลลัพธ์
ho.JPG
ho.JPG (14.89 KiB) Viewed 1025 times
ผลลัพธ์เมื่อคลิกที่ปุ่มทำให้สูง
dgr.JPG
dgr.JPG (17.84 KiB) Viewed 1025 times
อ้างอิง : https://www.w3schools.com/jquery/eff_animate.asp
https://www.w3schools.com/jquery/tryit. ... ff_animate

Top