ในการออกแบบเว็บเพื่อให้เป็นที่สนใจและสร้างความสะดวกนั้นต้องมีการเพิ่มลูกเล่นๆแปลกๆใหม่ๆ ให้ใช้ตามสมควร ซึ่งการทำให้เจ้าสิ่งนี้ เราสามารถใช้ JavaScript library ต่างๆ ที่มีคนทำให้แล้ว หรือสามารถสร้างสรรค์เองได้ โดยใช้ Jquery ซึงบทความนี้จะมานำเสนอ เมธอด stop () ที่มีไว้สำหรับจัดการกับ animation หรือภาพเคลื่อไหว
เมธอด stop () เป็นเมธอด inbuilt ใน jQuery ซึ่งใช้เพื่อหยุดภาพเคลื่อนไหวที่กำลังทำงานสำหรับอีลีเมนท์ที่เลือก
โดยรูปแบบ syntax มีดังนี้
$(selector).stop(stopAll, goToEnd);พารามิเตอร์:วิธีการนี้ยอมรับสองพารามิเตอร์ดังกล่าวข้างต้นและอธิบายไว้ด้านล่าง:
- stopAll:เป็นพารามิเตอร์และค่าของพารามิเตอร์นี้คือบูลีน พารามิเตอร์นี้ใช้เพื่อระบุว่าจะหยุดการเคลื่อนไหวที่อยู่ในคิวด้วยหรือไม่ ค่าเริ่มต้นของพารามิเตอร์นี้เป็นเท็จ
- goToEnd : เป็นพารามิเตอร์และค่าของพารามิเตอร์นี้คือบูลีน พารามิเตอร์นี้ใช้เพื่อระบุว่าจะทำแอนิเมชั่นทั้งหมดในทันทีหรือไม่ ค่าเริ่มต้นของพารามิเตอร์นี้เป็นเท็จเช่นกัน
ตัวโค้ด HTML และ Js ดังนี้
<!DOCTYPE html>
<html>
<head>
<title>The stop Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQurey code to show the working of this method -->
<script>
$(document).ready(function() {
$("#gfg_start").click(function() {
$("div").animate({
height: 300
}, 1000);
$("div").animate({
width: 300
}, 1000);
});
$("#gfg_stop").click(function() {
$("div").stop();
});
});
</script>
<style>
div {
background: green;
height: 60px;
width: 60px;
}
button {
margin-bottom:30px;
}
</style>
</head>
<body>
<!-- click on this button and animation will start -->
<button id="gfg_start">Start</button>
<!-- click on this button and animation will stop -->
<button id="gfg_stop">Stop</button>
<div></div>
</body>
</html>
ผลลัพธ์ที่ได้
จากที่แสดงให้เห็นนั้น เมื่อกดปุ่ม start animate จะเริ่มทำงาน และเมื่อกดปุ่ม stop animation จะหยุดทำงานทันที ซึ่งเราสามารถนำประยุกต์เพิ่มเติมได้ นำไปใช้กับการทำงานต่างๆที่เหมาะสม เพื่อสร้างความน่าสนใจในการใช้ของผู้ใช้เว็บได้มากขึ้น
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery
