ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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 ต่อไป

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
องค์ประกอบพื้นฐานของการจัดทำ Extension
โดย Ittichai_chupol พฤ 20 ก.พ. 2020 1:56 pm บอร์ด PHP Knowledge
0
8
พฤ 20 ก.พ. 2020 1:56 pm โดย Ittichai_chupol
ประทานโทษ
โดย noppadonsk พฤ 20 ก.พ. 2020 12:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พฤ 20 ก.พ. 2020 12:54 pm โดย noppadonsk
มาแล้ว Plugin System MooZiiCart Auto Close สำหรับตั้งเวลาเปิดปิดระบบการสั่งซื้อสินค้าออนไลน์
โดย prmindphp พ 19 ก.พ. 2020 6:40 pm บอร์ด MindPHP News & Feedback
0
24
พ 19 ก.พ. 2020 6:40 pm โดย prmindphp
ถ้าคุณต้องเลือก
โดย noppadonsk พ 19 ก.พ. 2020 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
พ 19 ก.พ. 2020 11:22 am โดย noppadonsk
อยากจะทราบว่าวิธีการแสดงค่าอาเรย์แต่ล่ะค่าครับ
โดย waterwelon พ 19 ก.พ. 2020 11:04 am บอร์ด Programming - PHP
2
32
พ 19 ก.พ. 2020 11:58 am โดย thatsawan
คลายเครียด
โดย noppadonsk อ 18 ก.พ. 2020 2:50 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
อ 18 ก.พ. 2020 2:50 pm โดย noppadonsk
7 สิ่งที่ต้องปรับปรุงเพื่อลดค่า Bounce Rate บนหน้าเว็บไซต์
โดย phasamon อ 18 ก.พ. 2020 10:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
อ 18 ก.พ. 2020 10:22 am โดย phasamon
อยากให้ธุรกิจเป็นที่รู้จักบนโลกออนไลน์ ลองหาบริษัทรับทำ SEO ดูซิ !
โดย totheworld จ 17 ก.พ. 2020 3:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
60
จ 17 ก.พ. 2020 3:34 pm โดย totheworld
สี่เหตุผลที่ควรปรับปรุงเว็บไซต์
โดย phasamon จ 17 ก.พ. 2020 2:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
39
จ 17 ก.พ. 2020 2:05 pm โดย phasamon
อย่าได้พลาดเชียว
โดย noppadonsk จ 17 ก.พ. 2020 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
จ 17 ก.พ. 2020 10:52 am โดย noppadonsk
วิธีการแก้ไขปํญหา undefined index กรณีกำหนดเงือนไขเทียบค่าอาร์เรย์
โดย Ittichai_chupol ศ 14 ก.พ. 2020 5:50 pm บอร์ด PHP Knowledge
0
72
ศ 14 ก.พ. 2020 5:50 pm โดย Ittichai_chupol
เรื่องน่าเศร้า
โดย noppadonsk ศ 14 ก.พ. 2020 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
68
ศ 14 ก.พ. 2020 10:19 am โดย noppadonsk
อยากทรบวิธีจัดการไม่ให้สมาชิกที่อยู่ในกลุ่มที่กำหนดมาส่องโพสต์ของผู้อื่นได้
โดย Ittichai_chupol พฤ 13 ก.พ. 2020 3:22 pm บอร์ด Programming - PHP
3
99
พฤ 13 ก.พ. 2020 5:31 pm โดย thatsawan
กลับไปเริ่มใหม่
โดย noppadonsk พฤ 13 ก.พ. 2020 10:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
56
พฤ 13 ก.พ. 2020 10:57 am โดย noppadonsk
อยากทราบการเอาเลขมาคุณในช่อง 10อัน แล้วมาแล้วผลข้างล่างครับ
โดย comopal พ 12 ก.พ. 2020 6:49 pm บอร์ด Programming - PHP
1
125
พฤ 13 ก.พ. 2020 9:39 am โดย LEG
ต้องรีบเดี๋ยวลืม
โดย noppadonsk พ 12 ก.พ. 2020 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
54
พ 12 ก.พ. 2020 10:56 am โดย noppadonsk
วิธีการเลือกงาน
โดย jataz2 พ 12 ก.พ. 2020 9:47 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
67
พ 12 ก.พ. 2020 9:47 am โดย jataz2
วิธีการไปสัมภาษณ์งาน
โดย jataz2 พ 12 ก.พ. 2020 9:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
62
พ 12 ก.พ. 2020 9:25 am โดย jataz2
วิธีการ insert ข้อมูลในขั้นตอนติดตั้ง Extension phpbb
โดย Ittichai_chupol อ 11 ก.พ. 2020 5:55 pm บอร์ด PHP Knowledge
1
97
อ 11 ก.พ. 2020 6:01 pm โดย thatsawan
visual studio 2008 crystal reports viewer มี ในToolbox แต่ใช้งานไม่ได้
โดย d.direk อ 11 ก.พ. 2020 2:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
103
อ 11 ก.พ. 2020 2:33 pm โดย d.direk