ในJquery(เจคิวรี่) มี method() ที่น่าสนใจมากมายและวันนี้อยากเสนอ method ที่ชื่อว่า
stop() เป็นวิธีที่ใช้ในการหยุดภาพเคลื่อนไหวหรือสามารถสั่งให้หยุดก่อนที่เรากำหนดไว้ได้
ตัวอย่างการทำแบบ sliding(สไลดิ้ง) แล้วนำ method stop() มาใช้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #ff3399;
color: white;
border: solid 1px #33001a;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">คลิกหยุด</button>
<div id="flip">คลิกเลย!!!!</div>
<div id="panel">Hello MindPHP!</div>
</body>
</html>
ผลลัพธ์
ตัวอย่างการทำแบบ animation(อนิเมชั่น) แล้วนำ method stop() มาใช้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left: '100px'}, 5000);
$("div").animate({fontSize: '3em'}, 5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button id="start">เริ่ม</button>
<button id="stop">หยุด</button>
<button id="stop2">หยุดทั้งหมด</button>
<button id="stop3">หยุดตอนจบ</button>
<div style="background:#ff3399;height:100px;width:200px;position:absolute;">HELLO MindPHP!</div>
</body>
</html>
ผลลัพธ์
- e2.JPG (13.87 KiB) Viewed 1668 times
Method stop() ใช้งานได้ร่วมกับทุกฟังก์ชั่นใน jQuery effect(เจคิวรี่ เอ็ฟเฟค) รวมถึงภาพเคลื่อนไหวแบบเลื่อน, ซีดจางและแบบกำหนดเอง
Syntax:
[/i][/b]
ตัวพารามิเตอร์ stopAll ก็คือตัวเลือกที่จะระบุว่าจะให้เคลื่อนไหวหรือล้างการเคลื่อนไหว การตั้งค่าเริ่มต้นเป็นค่าเท็จ
ตัวพารามิเตอร์ goToEnd ระบุว่าจะให้ภาพเคลื่อนไหวปัจจุบันทำงานเสร็จสมบูรณ์ทันทีหรือไม่ ค่าเริ่มต้นเป็นค่าเท็จ
อ้างอิง :
https://www.w3schools.com/jquery/jquery_stop.asp
[b]ใน[url=https://www.mindphp.com/forums/viewforum.php?f=78]Jquery(เจคิวรี่)[/url][/b] มี method() ที่น่าสนใจมากมายและวันนี้อยากเสนอ method ที่ชื่อว่า[b][color=#BF0080] stop() [/color][/b]เป็นวิธีที่ใช้ในการหยุดภาพเคลื่อนไหวหรือสามารถสั่งให้หยุดก่อนที่เรากำหนดไว้ได้
[b]ตัวอย่างการทำแบบ sliding(สไลดิ้ง) แล้วนำ method stop() มาใช้[/b]
[code]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #ff3399;
color: white;
border: solid 1px #33001a;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">คลิกหยุด</button>
<div id="flip">คลิกเลย!!!!</div>
<div id="panel">Hello MindPHP!</div>
</body>
</html>[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=1]e1.JPG[/attachment]
[b]ตัวอย่างการทำแบบ animation(อนิเมชั่น) แล้วนำ method stop() มาใช้[/b]
[code]<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left: '100px'}, 5000);
$("div").animate({fontSize: '3em'}, 5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button id="start">เริ่ม</button>
<button id="stop">หยุด</button>
<button id="stop2">หยุดทั้งหมด</button>
<button id="stop3">หยุดตอนจบ</button>
<div style="background:#ff3399;height:100px;width:200px;position:absolute;">HELLO MindPHP!</div>
</body>
</html>[/code]
[color=#FF0000][b]ผลลัพธ์[/b][/color]
[attachment=0]e2.JPG[/attachment]
[b]Method stop()[/b] ใช้งานได้ร่วมกับทุกฟังก์ชั่นใน jQuery effect(เจคิวรี่ เอ็ฟเฟค) รวมถึงภาพเคลื่อนไหวแบบเลื่อน, ซีดจางและแบบกำหนดเอง
[color=#BF0080][b]Syntax:[/b][/color]
[b][i] [code]$(selector).stop(stopAll,goToEnd);[/code][/i][/b]
[b]ตัวพารามิเตอร์ stopAll[/b] ก็คือตัวเลือกที่จะระบุว่าจะให้เคลื่อนไหวหรือล้างการเคลื่อนไหว การตั้งค่าเริ่มต้นเป็นค่าเท็จ
[b]ตัวพารามิเตอร์ goToEnd[/b] ระบุว่าจะให้ภาพเคลื่อนไหวปัจจุบันทำงานเสร็จสมบูรณ์ทันทีหรือไม่ ค่าเริ่มต้นเป็นค่าเท็จ
[b]อ้างอิง[/b] : [url]https://www.w3schools.com/jquery/jquery_stop.asp[/url]