โดย 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 (14.89 KiB) Viewed 1717 times
ผลลัพธ์เมื่อคลิกที่ปุ่มทำให้สูง
- dgr.JPG (17.84 KiB) Viewed 1717 times
อ้างอิง :
https://www.w3schools.com/jquery/eff_animate.asp
https://www.w3schools.com/jquery/tryit. ... ff_animate
[b][color=#FF00BF][size=150]Method animate()[/size][/color][/b] คือวิธีการใช้การเคลื่อนไหวแบบกำหนดเองของ [url=https://www.mindphp.com/forums/viewforum.php?f=73]CSS[/url]
[b][size=150][color=#00BF00]รูปแบบการเขียนไวยากรณ์หลัก(Syntax)[/color][/size][/b]
[quote](selector).animate({styles},speed,easing,callback)[/quote]
[list][b]styles[/b] เราจำเป็นต้องใช้เพื่อที่จะระบุคุณสมบัติหรือค่าของ CSS อย่างน้อยหนึ่งค่าเพื่อให้มันทำงานได้
Styles เราสามารถนำมาใส่ได้ เช่น [url=https://www.mindphp.com/forums/viewforum.php?f=73]padding[/url], bottom, textIndent, margin, backgroundPositionX เป็นต้น
[b]speed[/b] คือ การระบุความเร็วของภาพเคลื่อนไหว จะกำหนดให้ "slow" หรือ "fast" ก็ได้
[b]easing[/b] คือ การระบุความเร็วขององค์ประกอบในจุดต่างๆของภาพเคลื่อนไหว โดยจำกำหนดให้เป็น "swing" เคลื่อนที่ช้าลงในจุดเริ่มต้นหรือจุดสิ้นสุดแต่ตรงกลางจะเร็ว หรือกำหนดให้เป็น "linear" เคลื่อนที่ด้วยความเร็วคงที่
[b]callback[/b] คือ ฟังก์ชันที่จะเรียกใช้หลังจากที่ภาพเคลื่อนไหวเสร็จสิ้น
[/list]
[b][color=#00BF00][size=150]รูปแบบการเขียนไวยากรณ์หลัก[/size][/color][/b]
[quote](selector).animate({styles},{options})[/quote]
[list][b]styles[/b] คือ ระบุ Styles หรือตัว CSSลงไปเพื่อให้ดูสวยงาม
[b]options[/b] คือ ระบุตัวเลือกเพิ่มเติมสำหรับภาพเคลื่อนไหว
[list][b]duration[/b]: การกำหนดความเร็วของภาพเคลื่อนไหว
[b]easing[/b]: การระบุฟังก์ชั่นที่ง่ายต่อการใช้งาน
[b]complete[/b]: การระบุฟังก์ชั่นที่จะทำหลังจากการเคลื่อนไหวเสร็จ
[b]step[/b]: ระบุฟังก์ชันที่จะเรียกใช้สำหรับแต่ละขั้นตอนในภาพเคลื่อนไหว
[b]progress[/b]: ระบุฟังก์ชันที่จะเรียกใช้หลังจากแต่ละขั้นตอนในภาพเคลื่อนไหว
[b]queue[/b]: ค่าบูลีน (Boolean value)ระบุว่าจะวางภาพเคลื่อนไหวในคิวเอฟเฟ็กต์หรือไม่
[b]specialEasing[/b]: เลือกคุณสมบัติของ CSS อย่างน้อยหนึ่งคุณสมบัติจาก พารามิเตอร์ Styles และให้สอดคล้องกับฟังก์ชั่น Easing ด้วย
[b]start[/b]: ระบุฟังก์ชันที่จะเรียกใช้เมื่อเริ่มต้นการเคลื่อนไหว
[b]done[/b]: ระบุฟังก์ชันที่จะเรียกใช้เมื่อสิ้นสุดการเคลื่อนไหว
[b]fail[/b]: ระบุฟังก์ชันที่จะเรียกใช้หากการเคลื่อนไหวไม่เสร็จสมบูรณ์
[b]always[/b]: ระบุฟังก์ชันที่จะเรียกใช้ถ้าภาพเคลื่อนไหวหยุดลงโดยไม่ได้ทำ
[/list][/list]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
[b][color=#FF0000]ผลลัพธ์[/color][/b]
[attachment=1]ho.JPG[/attachment]
[color=#FF0000][b]ผลลัพธ์เมื่อคลิกที่ปุ่มทำให้สูง[/b][/color]
[attachment=0]dgr.JPG[/attachment]
อ้างอิง : [url]https://www.w3schools.com/jquery/eff_animate.asp[/url]
[url]https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate[/url]