รูปแบบการเขียนไวยากรณ์หลัก(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: ระบุฟังก์ชันที่จะเรียกใช้ถ้าภาพเคลื่อนไหวหยุดลงโดยไม่ได้ทำ
- duration: การกำหนดความเร็วของภาพเคลื่อนไหว
โค้ด: เลือกทั้งหมด
<!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>
https://www.w3schools.com/jquery/tryit. ... ff_animate