ให้เรตสมาชิก: 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" ข้อความหยุดเคลื่อนที่ตรงจุดที่เราคลิก  (คลิกตรงไหนก็อยู่ตรงนั้น)

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ฺB - รหัสสินค้าเรียงลำดับไม่ถูกต้อง [2018-06][005]
โดย Rujikon จ 18 มิ.ย. 2018 5:38 pm บอร์ด Hachanna - Testter
0
1
จ 18 มิ.ย. 2018 5:38 pm โดย Rujikon
R - ลบคำว่า Access this document directly in OpenERP ตอนที่ส่งเมลจากระบบหาลูกค้า @M017
โดย mindphp จ 18 มิ.ย. 2018 5:34 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 18 มิ.ย. 2018 5:34 pm โดย mindphp
Review เครื่องพิมพ์แบบ DoT Matrix Printer (ดอตแมทริกซ์)
โดย AePongsak จ 18 มิ.ย. 2018 5:15 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
จ 18 มิ.ย. 2018 5:15 pm โดย AePongsak
B - หน้ารายการสินค้าโหลด javascript มา 90 ไฟล์
โดย tsukasaz จ 18 มิ.ย. 2018 3:06 pm บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
0
4
จ 18 มิ.ย. 2018 3:06 pm โดย tsukasaz
รวมกระทู้แจ้ง Bug ของ Extension joomla เวอร์ชัน 4.0 ที่ติดตั้งบน localhost
โดย Parichat จ 18 มิ.ย. 2018 3:04 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
6
จ 18 มิ.ย. 2018 3:04 pm โดย Parichat
B - mod_md_recent สามารถติดตั้งได้ ตั้งค่าได้แต่ไม่สามารถแสดงในหน้าเว็บได้
โดย Parichat จ 18 มิ.ย. 2018 10:46 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
3
จ 18 มิ.ย. 2018 10:46 am โดย Parichat
งานประจำวันที่ 18 มิถุนายน 2561
โดย Rujikon จ 18 มิ.ย. 2018 10:21 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
6
จ 18 มิ.ย. 2018 12:37 pm โดย AePongsak
งานประจำวันที่ 18 มิถุนายน 2561
โดย taemmynatchapon จ 18 มิ.ย. 2018 10:10 am บอร์ด M063 - ณัชพล ชัยวุฒิ
0
2
จ 18 มิ.ย. 2018 10:10 am โดย taemmynatchapon
งานประจำวันที่ 18 มิถุนายน 2561
โดย Parichat จ 18 มิ.ย. 2018 9:46 am บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
จ 18 มิ.ย. 2018 9:46 am โดย Parichat
B - demo Print loading list ภาษาไทยไม่แสดง
โดย mindphp อ 17 มิ.ย. 2018 12:09 am บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
1
2
อ 17 มิ.ย. 2018 12:28 am โดย mindphp
B - มีโมดูลเกินใน demo
โดย mindphp ส 16 มิ.ย. 2018 11:53 pm บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
0
1
ส 16 มิ.ย. 2018 11:53 pm โดย mindphp
Q - วิธีเรียกตัวแปรมาใช้ในไฟล์ php ที่แสดงในหน้าเว็บใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 6:58 pm บอร์ด Joomla Dev
57
126
จ 18 มิ.ย. 2018 5:25 pm โดย Parichat
B - com_mcharts สามารถติดตั้งได้แต่ไม่สามารถเข้าหน้าตั่งค่าได้
โดย Parichat ส 16 มิ.ย. 2018 5:12 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
ส 16 มิ.ย. 2018 5:12 pm โดย Parichat
B - com_MJUpgrade ไม่สามารถติดตั้งได้
โดย Parichat ส 16 มิ.ย. 2018 4:48 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
2
ส 16 มิ.ย. 2018 4:48 pm โดย Parichat
B - com_M2OpenERP Migration สามารถติดตั้งได้แต่ไม่สามารถใช้งานได้
โดย Parichat ส 16 มิ.ย. 2018 4:31 pm บอร์ด M2OpenERP
0
5
ส 16 มิ.ย. 2018 4:31 pm โดย Parichat
controller เรียกใช้ function ใน model ใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 3:38 pm บอร์ด Joomla Developing Knowledge
0
39
ส 16 มิ.ย. 2018 3:38 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย Rujikon ส 16 มิ.ย. 2018 9:40 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
7
ส 16 มิ.ย. 2018 7:06 pm โดย Rujikon
งานประจำวันที่ 16 มิถุนายน 2561
โดย Parichat ส 16 มิ.ย. 2018 9:35 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
3
ส 16 มิ.ย. 2018 7:09 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย wilawan ส 16 มิ.ย. 2018 8:33 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
10
ส 16 มิ.ย. 2018 7:02 pm โดย thatsawan
upload file ไม่เข้าค่ะผิดตรงไหนค่ะ รบกวนแนะนำหน่อยค่ะ _/|\_
โดย supattra_su ศ 15 มิ.ย. 2018 6:08 pm บอร์ด Programming - PHP
1
63
ส 16 มิ.ย. 2018 1:03 am โดย mindphp