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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1863
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 09/01/2018 10:26 am

ใน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) เปิดดู 158 ครั้ง


Method stop() ใช้งานได้ร่วมกับทุกฟังก์ชั่นใน jQuery effect(เจคิวรี่ เอ็ฟเฟค) รวมถึงภาพเคลื่อนไหวแบบเลื่อน, ซีดจางและแบบกำหนดเอง
Syntax:

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

$(selector).stop(stopAll,goToEnd);


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

อ้างอิง : https://www.w3schools.com/jquery/jquery_stop.asp
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน