ให้เรตสมาชิก: 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 - Migrate รายการสินค้าขึ้นระบบซ้ำ
โดย rinrada อ 25 ก.ย. 2018 7:51 pm บอร์ด สิริกิตติรัตน์ - Tester
0
4
อ 25 ก.ย. 2018 7:51 pm โดย rinrada
งานประจำวันที่ 25 กันยายน 2561
โดย tai14 อ 25 ก.ย. 2018 10:08 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
6
อ 25 ก.ย. 2018 7:29 pm โดย tai14
การใช้งาน phpbbb แบบพื้นฐานเบื้องต้น ส่วนของข้อความส่วนตัว
โดย Ittichai_chupol อ 25 ก.ย. 2018 7:10 pm บอร์ด phpBB user Guide Knowledge
0
5
อ 25 ก.ย. 2018 7:10 pm โดย Ittichai_chupol
R - mdsoft_order_mrp_print - ใบปริ้นการผลิต @M045
โดย nuattawoot อ 25 ก.ย. 2018 6:51 pm บอร์ด สิริกิตติรัตน์ - Developer
1
3
อ 25 ก.ย. 2018 6:57 pm โดย nuattawoot
R - mdsoft_order_mrp_bom_print - ใบปริ้นบอม@045
โดย nuattawoot อ 25 ก.ย. 2018 6:38 pm บอร์ด สิริกิตติรัตน์ - Developer
1
3
อ 25 ก.ย. 2018 6:40 pm โดย nuattawoot
รบกวนช่วยหน่อยค่ะ จะเพิ่ม code สีลง database แต่มันไม่ลงไม่แน่ใจว่าส่งค่าถูกไหม (เขียนด้วย CI ค่ะ)
โดย supattra_su อ 25 ก.ย. 2018 6:14 pm บอร์ด Programming - PHP
2
12
อ 25 ก.ย. 2018 6:28 pm โดย supattra_su
R - mdsoft_ziri_install_all_module -ติดตั้งตัวรวม @M045
โดย nuattawoot อ 25 ก.ย. 2018 5:18 pm บอร์ด สิริกิตติรัตน์ - Developer
1
4
อ 25 ก.ย. 2018 5:30 pm โดย nuattawoot
B - หัวข้อแรกที่ customize ไม่ได้ปรากฏบนฐานจริงครับ [2018-09][007]
โดย muneela อ 25 ก.ย. 2018 3:11 pm บอร์ด Hachanna - Testter
2
10
อ 25 ก.ย. 2018 5:10 pm โดย muneela
การใช้งาน phpbb แบบพื้นฐานเบื้องต้น ส่วนการสร้างกระทู้
โดย Ittichai_chupol อ 25 ก.ย. 2018 2:38 pm บอร์ด phpBB user Guide Knowledge
0
10
อ 25 ก.ย. 2018 2:38 pm โดย Ittichai_chupol
เขือนแก่งกระจาน เขือนสำคัญ เพชรบุรี
โดย Ittichai_chupol อ 25 ก.ย. 2018 12:02 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
อ 25 ก.ย. 2018 12:02 pm โดย Ittichai_chupol
ตัวช่วยในการสร้างฟอร์มกรอกข้อมูลบนเว็บไซต์ที่ดียิ่งขึ้น โดยใช้ Component Mjform Advance ใน Joomla
โดย Parichat อ 25 ก.ย. 2018 11:08 am บอร์ด PHP News
0
5
อ 25 ก.ย. 2018 11:08 am โดย Parichat
งานประจำวันทีี่ 25 กันยายน 2561
โดย prakon อ 25 ก.ย. 2018 10:14 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
13
อ 25 ก.ย. 2018 10:15 am โดย prakon
งานประจำวันที่ 25 กันยายน 2561
โดย pprn อ 25 ก.ย. 2018 10:13 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
อ 25 ก.ย. 2018 7:22 pm โดย pprn
งานประจำวันที่ 25 กันยายน 2561
โดย muneela อ 25 ก.ย. 2018 10:11 am บอร์ด M068 - มุนีลา หมัดบาซา
1
7
อ 25 ก.ย. 2018 7:34 pm โดย muneela
งานประจำวันที่ 25 กันยายน 2561
โดย Ittichai_chupol อ 25 ก.ย. 2018 9:38 am บอร์ด M070 - อิทธิชัย ชูผล
3
16
อ 25 ก.ย. 2018 7:24 pm โดย Ittichai_chupol
งานที่ประจำวันที่ 25 กันยายน 2561
โดย tatiya อ 25 ก.ย. 2018 9:28 am บอร์ด M065 - ตติยะ นาชัย
1
3
อ 25 ก.ย. 2018 9:04 pm โดย tatiya
R - mod_jshopping_static โมดูลสถิติ
โดย pprn จ 24 ก.ย. 2018 6:43 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
2
5
อ 25 ก.ย. 2018 7:19 pm โดย pprn
B - สร้างสินค้าไม่ได้ error @M045
โดย thatsawan จ 24 ก.ย. 2018 4:20 pm บอร์ด สิริกิตติรัตน์ - Tester
1
6
จ 24 ก.ย. 2018 6:49 pm โดย nuattawoot
index อบรม Odoo ครั้งที่ 31
โดย tatiya จ 24 ก.ย. 2018 3:52 pm บอร์ด M065 - ตติยะ นาชัย
0
2
จ 24 ก.ย. 2018 3:52 pm โดย tatiya
อยากทำ input type color โชว์ พอ summit ลง database ด้วยค่ะ
โดย supattra_su จ 24 ก.ย. 2018 3:50 pm บอร์ด Programming - PHP
0
17
จ 24 ก.ย. 2018 3:50 pm โดย supattra_su