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

ในการออกแบบเว็บเพื่อให้เป็นที่สนใจและสร้างความสะดวกนั้นต้องมีการเพิ่มลูกเล่นๆแปลกๆใหม่ๆ ให้ใช้ตามสมควร ซึ่งการทำให้เจ้าสิ่งนี้ เราสามารถใช้ JavaScript library ต่างๆ ที่มีคนทำให้แล้ว หรือสามารถสร้างสรรค์เองได้ โดยใช้ Jquery  ซึงบทความนี้จะมานำเสนอ เมธอด stop () ที่มีไว้สำหรับจัดการกับ animation  หรือภาพเคลื่อไหว  

เมธอด stop () เป็นเมธอด inbuilt ใน jQuery ซึ่งใช้เพื่อหยุดภาพเคลื่อนไหวที่กำลังทำงานสำหรับอีลีเมนท์ที่เลือก 

โดยรูปแบบ syntax มีดังนี้ 

$(selector).stop(stopAll, goToEnd);

พารามิเตอร์:วิธีการนี้ยอมรับสองพารามิเตอร์ดังกล่าวข้างต้นและอธิบายไว้ด้านล่าง:

  • stopAll:เป็นพารามิเตอร์และค่าของพารามิเตอร์นี้คือบูลีน พารามิเตอร์นี้ใช้เพื่อระบุว่าจะหยุดการเคลื่อนไหวที่อยู่ในคิวด้วยหรือไม่ ค่าเริ่มต้นของพารามิเตอร์นี้เป็นเท็จ
  • goToEnd : เป็นพารามิเตอร์และค่าของพารามิเตอร์นี้คือบูลีน พารามิเตอร์นี้ใช้เพื่อระบุว่าจะทำแอนิเมชั่นทั้งหมดในทันทีหรือไม่ ค่าเริ่มต้นของพารามิเตอร์นี้เป็นเท็จเช่นกัน 

ตัวโค้ด HTML และ Js ดังนี้

<!DOCTYPE html> 
<html> 
	<head> 
		<title>The stop Method</title> 
		<script src= 
		"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
		</script> 
		
		<!-- jQurey code to show the working of this method -->
		<script> 
			$(document).ready(function() { 
				$("#gfg_start").click(function() { 
					$("div").animate({ 
						height: 300 
					}, 1000); 
					$("div").animate({ 
						width: 300 
					}, 1000); 
				}); 
				$("#gfg_stop").click(function() { 
					$("div").stop(); 
				}); 
			}); 
		</script> 
		<style> 
			div { 
				background: green; 
				height: 60px; 
				width: 60px; 
			} 
			button { 
				margin-bottom:30px; 
			} 
		</style> 
	</head> 
	<body> 
		<!-- click on this button and animation will start -->
		<button id="gfg_start">Start</button> 
		<!-- click on this button and animation will stop -->
		<button id="gfg_stop">Stop</button> 
		<div></div> 
	</body> 
</html> 

ผลลัพธ์ที่ได้ 

จากที่แสดงให้เห็นนั้น เมื่อกดปุ่ม start animate จะเริ่มทำงาน และเมื่อกดปุ่ม stop animation จะหยุดทำงานทันที  ซึ่งเราสามารถนำประยุกต์เพิ่มเติมได้ นำไปใช้กับการทำงานต่างๆที่เหมาะสม เพื่อสร้างความน่าสนใจในการใช้ของผู้ใช้เว็บได้มากขึ้น

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบวิธีการจะสร้างการทำงานสำหรับการแจ้งเตือนของ Extension ในอีเวน cron
โดย Ittichai_chupol พฤ 26 มี.ค. 2020 10:34 am บอร์ด PHP Knowledge
2
286
พฤ 26 มี.ค. 2020 2:34 pm โดย LEG
แสดงสินค้าขายดีในร้านค้าออนไลน์ด้วย Module Bestseller
โดย prmindphp พ 25 มี.ค. 2020 5:42 pm บอร์ด MindPHP News & Feedback
0
134
พ 25 มี.ค. 2020 5:42 pm โดย prmindphp
อยากทราบวิธีการที่จะสามารถปิดการแสดงของ modules ใน ucp โดยไม่ต้องเข้าไปจัดการในระบบ
โดย Ittichai_chupol พ 25 มี.ค. 2020 1:04 pm บอร์ด Programming - PHP
1
137
พ 25 มี.ค. 2020 1:05 pm โดย Ittichai_chupol
วิธีการสมัครเข้าใช้งาน Skype สำหรับใช้งาน VDO video conference ในมือถือ
โดย numtan5839 พ 25 มี.ค. 2020 11:26 am บอร์ด Microsoft Office Knowledge & line & Etc
1
242
พฤ 26 มี.ค. 2020 2:34 pm โดย LEG
อยากท่องเที่ยวใหว้พระอุดรกับรถเช่าอุดร แนะนำ
โดย udon999 อ 24 มี.ค. 2020 10:49 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
147
อ 24 มี.ค. 2020 10:49 pm โดย udon999
อยากเที่ยวอุดร ลองเช่ารถอุดร ท่องเที่ยวใหว้พระเชิญทางนี้
โดย udon999 อ 24 มี.ค. 2020 9:57 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
96
อ 24 มี.ค. 2020 9:57 pm โดย udon999
แสดงหมวดหมู่สินค้าให้กับร้านค้าออนไลน์ด้วย Module Category
โดย prmindphp อ 24 มี.ค. 2020 5:57 pm บอร์ด MindPHP News & Feedback
0
91
อ 24 มี.ค. 2020 5:57 pm โดย prmindphp
3 การขนส่งสินค้าที่แปลกที่สุดในโลก
โดย ngongsus อ 24 มี.ค. 2020 12:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
113
อ 24 มี.ค. 2020 12:58 pm โดย ngongsus
ตะกร้าสินค้าที่บอกรายละเอียดได้มากกว่าแค่ราคาสินค้า Module MooZiiCart - Cart Ext
โดย prmindphp จ 23 มี.ค. 2020 6:21 pm บอร์ด MindPHP News & Feedback
0
146
จ 23 มี.ค. 2020 6:21 pm โดย prmindphp
3 ข้อเท็จจริงอันน่าสนใจเกี่ยวกับไวรัสโคโรนา 2019 (COVID-19)
โดย nemo413 จ 23 มี.ค. 2020 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
139
จ 23 มี.ค. 2020 6:05 pm โดย nemo413
อยาทราบวิธีการสร้างลิ้งค์ ไปยัง จากส่วนการแจ้งเตือน ไป ยัง Extension ที่อยู่ในส่วนของ ucp
โดย Ittichai_chupol จ 23 มี.ค. 2020 4:28 pm บอร์ด Programming - PHP
1
291
จ 23 มี.ค. 2020 5:01 pm โดย mindphp
วางแผนค่าลดหย่อนภาษีอย่างไรให้ได้ประโยชน์ระยะยาว
โดย medalezga จ 23 มี.ค. 2020 12:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
95
จ 23 มี.ค. 2020 2:19 pm โดย kreemza123
ประกันสังคมปรับลดอัตราส่งเงิน นาน 6 เดือน เพื่อบรรเทาผลกระทบการแพร่ระบาดโรคไวรัส COVID-19
โดย thatsawan อ 22 มี.ค. 2020 1:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
360
พฤ 02 เม.ย. 2020 9:59 am โดย thatsawan
แนะนำสินค้าใหม่ในร้านค้าออนไลน์ของคุณให้น่าสนใจมากขึ้นด้วย Latest Products
โดย prmindphp ศ 20 มี.ค. 2020 5:27 pm บอร์ด MindPHP News & Feedback
0
379
ศ 20 มี.ค. 2020 5:27 pm โดย prmindphp
B - หน้ารายงานไม่อัพเดทข้อมูล ปัจจุบัน
โดย thatsawan ศ 20 มี.ค. 2020 4:04 pm บอร์ด DBF - Report
3
5
ศ 20 มี.ค. 2020 4:20 pm โดย thatsawan
วิธีการการปรับการแสดงวันที่ในเว็บบอร์ด phpbb
โดย Ittichai_chupol อ 17 มี.ค. 2020 7:07 pm บอร์ด PHP Knowledge
0
660
อ 17 มี.ค. 2020 7:07 pm โดย Ittichai_chupol
มาแล้ว Plugin System MD Image Responsive สำหรับแสดงภาพที่มีขนาดเหมาะสมกับหน้าจอของอุปกรณ์
โดย prmindphp อ 17 มี.ค. 2020 6:05 pm บอร์ด MindPHP News & Feedback
1
502
พ 18 มี.ค. 2020 10:03 am โดย VAC
การแก้บัคอย่างรวดเร็ว (Joke)
โดย noppadonsk อ 17 มี.ค. 2020 5:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
405
อ 17 มี.ค. 2020 5:04 pm โดย noppadonsk
ประชุมออนไลน์ง่ายๆด้วยการใช้โปรแกรม VSee - โปรแกรมสำหรับ Video Conference
โดย chatee supasand อ 17 มี.ค. 2020 2:24 pm บอร์ด Share Knowledge
0
604
อ 17 มี.ค. 2020 2:24 pm โดย chatee supasand
วิธีการแปลง ข้อมมูล วันที่จาก Excel เพื่อบันทึกลงในฐานข้อมูล
โดย Ittichai_chupol จ 16 มี.ค. 2020 11:43 am บอร์ด PHP Knowledge
0
354
จ 16 มี.ค. 2020 11:43 am โดย Ittichai_chupol