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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

ภาพประจำตัวสมาชิก
Parichat
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 769
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

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

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

<!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) เปิดดู 115 ครั้ง

ผลลัพธ์เมื่อคลิกที่ปุ่มทำให้สูง
dgr.JPG
dgr.JPG (17.84 KiB) เปิดดู 115 ครั้ง


อ้างอิง : https://www.w3schools.com/jquery/eff_animate.asp
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน