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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

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: ระบุฟังก์ชันที่จะเรียกใช้ถ้าภาพเคลื่อนไหวหยุดลงโดยไม่ได้ทำ
ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!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 1717 times
ผลลัพธ์เมื่อคลิกที่ปุ่มทำให้สูง
dgr.JPG
dgr.JPG (17.84 KiB) Viewed 1717 times
อ้างอิง : https://www.w3schools.com/jquery/eff_animate.asp
https://www.w3schools.com/jquery/tryit. ... ff_animate
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64