บทที่ 5 jQuery Effect ตอนที่ 3 (Animation)
animate() method ของ jQuery เป็น method ที่ช่วยในการสร้างแอนิเมชั่นแบบง่ายๆ
มี syntax ดังนี้
$(selector).animate({params},speed,callback); ***params ใช้กำหนดลักษณะการเคลื่อนไหวของแอนิเมชั่น
speed ใช้กำหนดความเร็วในการเคลื่อนไหว เช่น slow,fast,normal หรือ อาจใช้กำหนดตำแหน่งที่วัตถุจะเคลื่อนที่ไปก็ได้
****แท็ก meta หรือ <meta charset="utf8"> แท็กนี้เป็นแท็กที่ใส่เพื่อให้ web browser สามารถแสดงภาษาไทยได้ ซึ่งจะใส่ในส่วนของแท็ก <head>
ตัวอย่างที่ 1 การสร้างแอนิเมชันอย่างง่าย (JQuery animation)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({top:'250px'},4000);
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:pink;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
คลิกดูตัวอย่างที่ 1 (JQuery animation)
***จากตัวอย่างที่หนึ่งคือการกำหนดให้ object ที่สร้างด้วยแท็ก <div> ให้มีการเคลื่อนที่ลง 250px โดยใช้เวลาในการเคลื่อนที่ 4000 มิลลิวินาที (4วิ)
ตัวอย่างที่ 2 การเพิ่มลูกเล่นให้แอนิเมชันมีรูปแบบที่หลากหลายขึ้น (Manipulate Multiple Properties)
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
top:'300px',
opacity:'0.2',
height:'200px',
width:'200px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:pink;height:100px;width:100px;position:absolute;"></div>
</body>
</html>คลิกดูตัวอย่างที่ 2
ตัวอย่างที่ 3 การเพิ่ม values ให้กับแอนิเมชั่น
ซึ่งการใส่ค่า values ให้กับแอนิเมชั่น อาจใส่เป็น += เพื่อเพิ่มขนาดวัตถุ หรือ -= เพื่อลดขนาดวัตถุ นอกจากนี้แล้วยังสามารถใส่ค่า values ให้เป็น "show", "hide", หรือ "toggle" ก็ได้
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
top:'400px',
height:'-=50px',
width:'-=50px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>คลิกเพื่อดูการเคลื่อนที่แอนิเมชั่น </p>
<p>คลิกซ๊ำอีกที จะเห็นว่าสี่เหลี่ยมนั้นลดขนาดขึ้นอีก เเละคลิกอีกก็ลดอีก</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>คลิกดูตัวอย่างที่ 3 (values)
ตัวอย่างที่ 4 การสร้างแอนิเมชั่น โดยการใช้ Queue Functionality
เมื่อเราต้องการสร้างแอนิเมชั่นให้มีรูปแบบที่หลากหลาย จึงจำเป็นต้องมีการกำหนดการทำงานของคำสั่งว่าต้องทำอะไรก่อน อะไรหลังเหมือนกับลักษณะการเรียงคิวของตัวคำสั่ง ว่าต้องทำคำสั่งในก่อน คำสั่งในทีหลัง
<html>
<head>
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'100'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'100'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>คลิกเพื่อดูการเคลื่อนที่ของแอนิเมชั่น</p>
<div style="background:pink;height:100px;width:200px;position:absolute;">HELLO Nerd</div>
</body>
</html>คลิกดูตัวอย่างที่ 4 Queue Functionality
***จากตัวอย่างที่ 4 จะเห็นว่ามีการกำหนดลักษณะแอนิเมชั่นที่หลากหลาย ซึ่งจะมีลักษณะการทำงานแบบทีละ step ไปเรื่อยๆ โดยรอจน step แรกเสร็จ แล้วจึงเริ่ม step ต่อไป
