ให้เรตสมาชิก: 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
ทำความรู้จักกับ Open Stack OpenStack คืออะไร
โดย kubarnaza จ 11 ธ.ค. 2017 5:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
จ 11 ธ.ค. 2017 5:48 pm โดย kubarnaza
JFormHelper::loadFieldClass('list');
โดย Minanda จ 11 ธ.ค. 2017 10:42 am บอร์ด Joomla Development
3
33
จ 11 ธ.ค. 2017 10:42 am โดย Minanda
ช่วยด้วยครับ ติดตั้ง Component Joomshoping ThaiEdition ลงในจูลล่า 3.5 ไม่ได้อะครับ
โดย sdfza100 จ 11 ธ.ค. 2017 9:50 am บอร์ด Joomla Development
2
15
จ 11 ธ.ค. 2017 9:50 am โดย sdfza100
ไม่สามารถเข้าถึงไฟล์ PHP ใน Directory
โดย บุคคลทั่วไป ส 09 ธ.ค. 2017 3:40 pm บอร์ด Joomla Development
4
53
ส 09 ธ.ค. 2017 3:40 pm โดย บุคคลทั่วไป
เผยเทคนิค ดี ๆ ที่สามารถทำให้บ้านและสวนร่มรื่นได้
โดย บุคคลทั่วไป ศ 08 ธ.ค. 2017 4:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
ศ 08 ธ.ค. 2017 4:39 pm โดย บุคคลทั่วไป
วิธีการติดตั้ง Selenium ลง Python บน Windows
โดย Panchalee พฤ 07 ธ.ค. 2017 6:20 pm บอร์ด Software testing
0
35
พฤ 07 ธ.ค. 2017 6:20 pm โดย Panchalee
แสดงวันที่ปัจจุบันใน Python
โดย Wallapa พฤ 07 ธ.ค. 2017 11:30 am บอร์ด Python Knowledge
0
36
พฤ 07 ธ.ค. 2017 11:30 am โดย Wallapa
เมื่อต้องซ่อมคอมพิวเตอร์
โดย Before Dong พฤ 07 ธ.ค. 2017 10:48 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
45
พฤ 07 ธ.ค. 2017 10:48 am โดย mindphp
ขอวิธี Uninstall selenium web driver ใน python หน่อยค่ะ
โดย Panchalee พฤ 07 ธ.ค. 2017 10:48 am บอร์ด Programming - C/C++ & java & Python
3
43
พฤ 07 ธ.ค. 2017 10:48 am โดย Panchalee
แจกฟรี!! ปฏิทิน CRM ที่รวบรวมซอฟท์แวร CRM ยอดนิยมจากทั่วโลก ปี 2018/2561 พร้อมวันหยุด - โหลดก่อนได้ก่อนอย่ารอช้า!!
โดย Before Dong พ 06 ธ.ค. 2017 3:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
93
พ 06 ธ.ค. 2017 3:38 pm โดย Before Dong
สามารถลง Selenium ซ้ำกันในเครื่องเดียวกันได้มั้ยคะ หรือว่าต้อง Uninstall ออกก่อน
โดย Panchalee พ 06 ธ.ค. 2017 2:26 pm บอร์ด Programming - C/C++ & java & Python
1
53
พ 06 ธ.ค. 2017 2:26 pm โดย nuattawoot
แค่ใส่ CSS ชีวิตก็เปลี่ยน
โดย Before Dong พ 06 ธ.ค. 2017 10:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
72
พ 06 ธ.ค. 2017 10:31 am โดย konseo
วิธี คำสั่ง เครียพื้นที่ Swap ในลีนุ๊ค
โดย mindphp อ 05 ธ.ค. 2017 4:04 pm บอร์ด Linux - Web Server
0
30
อ 05 ธ.ค. 2017 4:04 pm โดย mindphp
รถไฟฟ้า.zip - ภาพล้อ โปรแกรมคอมพิวเตอร์
โดย Before Dong อ 05 ธ.ค. 2017 9:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
187
อ 05 ธ.ค. 2017 9:20 am โดย mindphp
เรียนรู้ kotlin เบื้องต้น
โดย chavikat.p จ 04 ธ.ค. 2017 5:24 pm บอร์ด Mobile Application Developing- Android, iOS
0
41
จ 04 ธ.ค. 2017 5:24 pm โดย chavikat.p
การทำ Button Groups โดยใช้ bootstap
โดย chavikat.p จ 04 ธ.ค. 2017 3:49 pm บอร์ด Booststap Knowledge
0
42
จ 04 ธ.ค. 2017 3:49 pm โดย chavikat.p
การทำ Collapse โดยใช้ bootstap
โดย chavikat.p จ 04 ธ.ค. 2017 3:43 pm บอร์ด Booststap Knowledge
0
33
จ 04 ธ.ค. 2017 3:43 pm โดย chavikat.p
ตัวอย่าง Error เกี่ยวกับ session บน Host ที่ สำหรับเขียนพื้นที่
โดย mindphp จ 04 ธ.ค. 2017 11:34 am บอร์ด Programming - PHP
1
40
จ 04 ธ.ค. 2017 11:34 am โดย mindphp
รวมงานประจำปี 2560
โดย chavikat.p จ 04 ธ.ค. 2017 10:54 am บอร์ด M053 - ชาวิกา แตงศรี
0
6
จ 04 ธ.ค. 2017 10:54 am โดย chavikat.p
รวมบทความประจำปี 2560
โดย chavikat.p จ 04 ธ.ค. 2017 10:53 am บอร์ด M053 - ชาวิกา แตงศรี
0
2
จ 04 ธ.ค. 2017 10:53 am โดย chavikat.p