การใช้ Method stop() ใน Jquery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้ Method stop() ใน Jquery

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

ใน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>
ผลลัพธ์
e1.JPG
ตัวอย่างการทำแบบ 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
e2.JPG (13.87 KiB) Viewed 1662 times
Method stop() ใช้งานได้ร่วมกับทุกฟังก์ชั่นใน jQuery effect(เจคิวรี่ เอ็ฟเฟค) รวมถึงภาพเคลื่อนไหวแบบเลื่อน, ซีดจางและแบบกำหนดเอง
Syntax:

โค้ด: เลือกทั้งหมด

$(selector).stop(stopAll,goToEnd);
[/i][/b]

ตัวพารามิเตอร์ stopAll ก็คือตัวเลือกที่จะระบุว่าจะให้เคลื่อนไหวหรือล้างการเคลื่อนไหว การตั้งค่าเริ่มต้นเป็นค่าเท็จ
ตัวพารามิเตอร์ goToEnd ระบุว่าจะให้ภาพเคลื่อนไหวปัจจุบันทำงานเสร็จสมบูรณ์ทันทีหรือไม่ ค่าเริ่มต้นเป็นค่าเท็จ

อ้างอิง : https://www.w3schools.com/jquery/jquery_stop.asp
Live Simply, Laugh Often, Love Deeply.....
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72