[list]1.jQuery slideDown()[/color]
เป็นการแสดงให้เห็นถึงแถบเลื่อน ของเมธอด slideDown()
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #66ffe0;
border: solid 1px #004d3d;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">คลิกให้ slidedown</div>
<div id="panel">Hello mindPHP!</div>
</body>
</html>
- 2.jQuery slideUp()
ตัวอย่างผลลัพธ์ก่อน slide up ผลลัพธ์หลังslide upโค้ด: เลือกทั้งหมด
<!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").slideUp("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #ff99cc; border: solid 1px #e60073; } #panel { padding: 50px; } </style> </head> <body> <div id="flip">คลิกเพื่อ slide up</div> <div id="panel">Hello MindPHP!</div> </body> </html>
- 3.jQuery slideToggle()
ตัวอย่างผลลัพธ์ก่อน slide up ผลลัพธ์หลัง slide upโค้ด: เลือกทั้งหมด
<!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").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #ccff33; border: solid 1px #86b300; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">คลิก slide down หรือ up</div> <div id="panel">Hello MindPHP!</div> </body> </html>
https://www.w3schools.com/jquery/tryit. ... slide_down
https://www.w3schools.com/jquery/tryit. ... y_slide_up
https://www.w3schools.com/jquery/tryit. ... ide_toggle