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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดสินค้าขาย
โดย milk2533 อ 24 พ.ย. 2020 12:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
4
อ 24 พ.ย. 2020 12:49 pm โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 11:17 am บอร์ด Share Knowledge
0
6
อ 24 พ.ย. 2020 11:17 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 11:15 am บอร์ด Share Knowledge
0
3
อ 24 พ.ย. 2020 11:15 am โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 10:51 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
4
อ 24 พ.ย. 2020 10:51 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 10:45 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
3
อ 24 พ.ย. 2020 10:45 am โดย milk2533
เทคนิคการใช้งานเว็บไซต์ mindphp Tip&Trick
โดย milk2533 อ 24 พ.ย. 2020 9:50 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
5
อ 24 พ.ย. 2020 9:50 am โดย milk2533
แนะนำเว็บไซต์ mindphp.com
โดย milk2533 อ 24 พ.ย. 2020 9:48 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
9
อ 24 พ.ย. 2020 9:48 am โดย milk2533
งานประจำวันที่ 24 พฤศจิกายน 2563
โดย milk2533 อ 24 พ.ย. 2020 9:38 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
40
อ 24 พ.ย. 2020 9:38 am โดย milk2533