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

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

บทที่ 5 jQuery Effect ตอนที่ 4 (stop() method )
    stop() เมธอด คือ เมธอดที่ใช้เพื่อให้ object หยุดการทำงาน เช่น ใช้เพื่อให้ animation ที่กำลังเคลื่อนไหวอยู่ ให้หยุดการเคลื่อนไหว  หรือ ใช้เพื่อให้ object ที่กำลังสไลด์อยู่หยุดการสไลด์ นอกจากใช้กับ slide effect แล้ว  เจ้า stop() เมธอดยังสามารถใช้กับ effect อื่นๆของ jQuery ได้ด้วย
มี syntax ดังนี้
$(selector).stop(stopAll,goToEnd); 1.selector ใช้เลือก object ที่เราต้องการ
2.stopAll คือ ค่าที่ใช้กำหนดเคลื่อนการที่คือของแอนิเมชั่น ว่าให้มีการหยุดได้ระหว่างที่ หรือ ไม่ให้หยุดเลย โดยจะใส่ค่าเป็น true หรือ false
    ในส่วนนี้ถ้าใส่ค่าเป็น true จะทำให้ object นั้นๆสามารถหยุดการทำงานได้ทันที โดยไม่ต้องเคลื่อนไหวต่อจนจบ เช่น เมื่อเราคลิกที่ที่ปุ่ม "start" object ก็จะเคลื่อนที่ และเมื่อคลิกที่ปุ่ม "stop" ตัว object ก็จะหยุดการทำงานทันที โดยไม่ต้องทำงานต่อจนจบ 
    แต่ถ้าหากเราใส่ค่าเป็น false จะทำให้ object นั้นๆ ไม่สามารถหยุดการทำงานได้เลย จนกว่าจะเคลื่อนไหวต่อจนจบ เช่น เมื่อเราคลิกที่ที่ปุ่ม "start" object ก็จะเคลื่อนที่ และเมื่อคลิกที่ปุ่ม "stop" ตัว object ก็ยังคงเคลื่อนที่ต่อไปเรื่อยๆจนจบ
3.goToEnd คือ ค่าที่ใช้กำหนดตำแหน่ง object ว่าให้ object นั้นหยุดอยู่ตรงสุดท้ายหรือไม่ เช่น
    ถ้าเรากำหนดค่าเป็น true เมื่อเราคลิกที่ที่ปุ่ม "start" object ก็จะเคลื่อนที่ และเมื่อคลิกที่ปุ่ม "stop" ตัว object ก็จะหยุดการทำงาน และ object นั้นก็จะขยับไปอยู่จุดสุดท้ายของการเคลื่อนที่ แม้ว่าเราจะคลิก "stop" ตอนไหนก็ตาม
    แต่ถ้าเรากำหนดค่าเป็น false เมื่อเราคลิกที่ที่ปุ่ม "start" object ก็จะเคลื่อนที่ และเมื่อคลิกที่ปุ่ม "stop" ตัว object ก็จะหยุดการทำงานตรงจุดที่เราคลิก
***หมายเหตุ ค่า stopAll กับ goToEnd อาจจะกำหนดหรือไม่กำหนดก็ได้

  ตัวอย่างที่1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>div {position: absolute;} </style>
<script src="/jquery-1.9.1.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"><p style="font-size:15pt; color:green">
<br>คลิกที่ปุ่ม "Go" เพื่อให้ฉันสไลด์ไปทางขวา พร้อมกับค่อยๆจางหายไป</br>
<br>คลิกที่ปุ่ม "STOP" เมื่อต้องการให้ฉันหยุดสไลด์</br>
<br>คลิกที่ปุ่ม "Back" ถ้าอยากให้ฉันสไลด์กลับมาที่จุดเริ่มต้น</br>
</p></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left:'+=200',opacity: 0.5}, 4000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop(true,true);
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=200px',opacity: 100}, 4000);
});
</script>
</body>
</html>

คลิกดูตัวอย่างที่ 1 stop(true,true)Method

ตัวอย่างที่2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>div {position: absolute;} </style>
<script src="/jquery-1.9.1.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"><p style="font-size:15pt; color:green">
<br>คลิกที่ปุ่ม "Go" เพื่อให้ฉันสไลด์ไปทางขวา พร้อมกับค่อยๆจางหายไป</br>
<br>คลิกที่ปุ่ม "STOP" เมื่อต้องการให้ฉันหยุดสไลด์</br>
<br>คลิกที่ปุ่ม "Back" ถ้าอยากให้ฉันสไลด์กลับมาที่จุดเริ่มต้น</br>
</p></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left:'+=200',opacity: 0.5}, 4000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop(false,false);
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=200px',opacity: 100}, 4000);
});
</script>
</body>
</html>


คลิกดูตัวอย่างที่ 2 stop(false,false)Method

   ***เปรียบเทียบระหว่างตัวอย่างที่ 1 กับ ตัวอย่างที่ 2 จะเห็นว่า
    ในตัวอย่างที่ 1 เมื่อเราคลิกที่ปุ่ม "start" ข้อความ หรือ object ของเราก็จะเคลื่อนที่ แล้วเมื่อคลิกที่ปุ่ม "stop" ข้อความหยุดเคลื่อนที่แถมยังขยับไปอยู่ที่ตำแหน่งสุดท้ายในการเคลื่อนที่ทันที แม้ว่าเราจะคลิกปุ่ม "stop" ตอนไหนก็ตาม

(คลิกตรงไหนก็ตาม แต่ก็จะไปอยู่ตำแหน่งสุดท้ายอยู่ดี)
    ในตัวอย่างที่ 2 เมื่อเราคลิกที่ปุ่ม "start" ข้อความ หรือ object ของเราก็จะเคลื่อนที่ แล้วเมื่อคลิกที่ปุ่ม "stop" ข้อความหยุดเคลื่อนที่ตรงจุดที่เราคลิก  (คลิกตรงไหนก็อยู่ตรงนั้น)

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ภาพนามสกุล heic image คืออะไรแล้วสร้างด้วยโปรแกรมอะไรค่ะ
โดย thatsawan อ 26 ก.ย. 2017 11:36 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
11
อ 26 ก.ย. 2017 11:36 pm โดย thatsawan
ภาพนามสกุล heic image คืออะไรแล้วสร้างด้วยโปรแกรมอะไรค่ะ
โดย thatsawan อ 26 ก.ย. 2017 11:35 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
15
อ 26 ก.ย. 2017 11:35 pm โดย thatsawan
ดาวน์โหลด AtomyMaxsite CMS เวอร์ชั่นล่าสุด
โดย ayeweb6AFJV อ 26 ก.ย. 2017 11:13 pm บอร์ด Free PHP Code Download script
0
8
อ 26 ก.ย. 2017 11:13 pm โดย ayeweb6AFJV
สอบถามโปรแกรม CD ค่ะ
โดย บุคคลทั่วไป อ 26 ก.ย. 2017 1:59 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
13
อ 26 ก.ย. 2017 1:59 pm โดย บุคคลทั่วไป
สอบถามเรื่อง getListFooter() ของ Joomla
โดย Minanda อ 26 ก.ย. 2017 1:18 pm บอร์ด Joomla Development
2
20
อ 26 ก.ย. 2017 1:18 pm โดย Minanda
Python Decorators
โดย nuattawoot อ 26 ก.ย. 2017 11:24 am บอร์ด Programming - C/C++ & java & Python
2
26
อ 26 ก.ย. 2017 11:24 am โดย nuattawoot
สรุป 13 ข้อ สาระสำคัญของ พ.ร.บ.คอมพิวเตอร์ 60 มีผลบังคับใช้แล้ว
โดย M029 อ 26 ก.ย. 2017 11:22 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
27
อ 26 ก.ย. 2017 11:22 am โดย M029
แค่ดู Keyboard ก็บอกได้ว่าเป็นของ "โปรแกรมเมอร์" หรือ "เกมเมอร์"
โดย Before Dong อ 26 ก.ย. 2017 10:34 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
37
อ 26 ก.ย. 2017 10:34 am โดย Before Dong
ฟรี Cloud SSD โฮสติ้ง โดย นกโฮสติ้ง
โดย nokhosting อ 26 ก.ย. 2017 9:59 am บอร์ด Web Hosting Review - Free Host Share Host VPS
0
13
อ 26 ก.ย. 2017 9:59 am โดย nokhosting
new project
โดย บุคคลทั่วไป จ 25 ก.ย. 2017 7:54 pm บอร์ด Programming - PHP
1
21
จ 25 ก.ย. 2017 7:54 pm โดย บุคคลทั่วไป
วิธี debug pl sql บน toad
โดย jataz2 จ 25 ก.ย. 2017 5:19 pm บอร์ด SQL - Database
0
12
จ 25 ก.ย. 2017 5:19 pm โดย jataz2
Font-End กับ Back-End
โดย Before Dong จ 25 ก.ย. 2017 10:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
35
จ 25 ก.ย. 2017 10:22 am โดย Before Dong
ทำไมเข้าเมลตัวเองไม่ได้
โดย เอ็มกับจ๋า อ 24 ก.ย. 2017 9:41 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
16
อ 24 ก.ย. 2017 9:41 pm โดย เอ็มกับจ๋า
สอบถามเกี่ยวกับ task
โดย Minanda อ 24 ก.ย. 2017 6:11 pm บอร์ด Joomla Development
1
42
อ 24 ก.ย. 2017 6:11 pm โดย Minanda
อยากเป็นแฮกเกอร์
โดย ชื่อ ต้า ส 23 ก.ย. 2017 6:38 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
38
ส 23 ก.ย. 2017 6:38 pm โดย ชื่อ ต้า
อยากเป็นแฮกเกอร์ แค่ไม่รู้อะไรเลย
โดย ชื่อ ต้า ส 23 ก.ย. 2017 6:37 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
53
ส 23 ก.ย. 2017 6:37 pm โดย toonytoony2004
ฉันมีความกังวนในความเป็นส่วนตัว
โดย สิทธิ์ ของหัวจัย ศ 22 ก.ย. 2017 10:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 22 ก.ย. 2017 10:40 pm โดย สิทธิ์ ของหัวจัย
เฟสให้ยืนยันตัวตนด้วยรูปเพื่อนในเฟสแต่หนูจำไม่ได้จากนั้นก็เข้าไม่ได้เลยค๊ะ
โดย บุคคลทั่วไป ศ 22 ก.ย. 2017 1:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
25
ศ 22 ก.ย. 2017 1:25 pm โดย บุคคลทั่วไป
สีผิวของ โปรแกรมเมอร์ และอาชีพต่างๆในฤดูร้อน
โดย Before Dong ศ 22 ก.ย. 2017 10:10 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
55
ศ 22 ก.ย. 2017 10:10 am โดย Before Dong
เรียกใช้คำสั่งในการวาดสี่เหลี่ยมและวงกลม
โดย Ik Kat พฤ 21 ก.ย. 2017 7:28 pm บอร์ด JavaScript & Jquery Ajax
0
32
พฤ 21 ก.ย. 2017 7:28 pm โดย Ik Kat