ตัวอย่างการทำแบบ 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>
โค้ด: เลือกทั้งหมด
<!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>
Syntax:
โค้ด: เลือกทั้งหมด
$(selector).stop(stopAll,goToEnd);
ตัวพารามิเตอร์ stopAll ก็คือตัวเลือกที่จะระบุว่าจะให้เคลื่อนไหวหรือล้างการเคลื่อนไหว การตั้งค่าเริ่มต้นเป็นค่าเท็จ
ตัวพารามิเตอร์ goToEnd ระบุว่าจะให้ภาพเคลื่อนไหวปัจจุบันทำงานเสร็จสมบูรณ์ทันทีหรือไม่ ค่าเริ่มต้นเป็นค่าเท็จ
อ้างอิง : https://www.w3schools.com/jquery/jquery_stop.asp