การ slide ใน jQueryมีองค์ประกอบขึ้นและลง โดยแบ่งได้ 3 รูปแบบ ดังนี้
[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>
[/list]
- 2.jQuery slideUp()
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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()
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!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/jquery_slide.asp
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
[b][size=200][color=#FF0080]การ slide ใน [url=https://www.mindphp.com/forums/viewforum.php?f=78]jQuery[/url][/color][/size][/b]มีองค์ประกอบขึ้นและลง โดยแบ่งได้ 3 รูปแบบ ดังนี้
[b][size=150][color=#FF00FF][list]1.jQuery slideDown()[/color][/size][/b]
เป็นการแสดงให้เห็นถึงแถบเลื่อน ของเมธอด slideDown()
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
[b][color=#FF0040]ผลลัพธ์[/color][/b]
[attachment=5]dfg.JPG[/attachment]
[b][color=#FF0040]ผลลัพธ์ตอน slidedown[/color][/b]
[attachment=4]fgr.JPG[/attachment][/list]
[list][b][color=#FF00FF]2.jQuery slideUp()[/color][/b]
[b][color=#FF0000]ตัวอย่าง[/color][/b]
[code]<!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>[/code]
[b][color=#FF0040]ผลลัพธ์ก่อน slide up[/color][/b]
[attachment=3]fgr.JPG[/attachment]
[b][color=#FF0040]ผลลัพธ์หลังslide up[/color][/b]
[attachment=2]dfg.JPG[/attachment]
[/list]
[list][color=#FF00FF][b]3.jQuery slideToggle()[/b][/color]
[color=#FF0000][b]ตัวอย่าง[/b][/color]
[code]<!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>[/code]
[b][color=#FF0040]ผลลัพธ์ก่อน slide up[/color][/b]
[attachment=1]fgdr.JPG[/attachment]
[color=#FF0040][b]ผลลัพธ์หลัง slide up[/b][/color]
[attachment=0]dft.JPG[/attachment][/list]
อ้างอิง : [url]https://www.w3schools.com/jquery/jquery_slide.asp[/url]
[url]https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down[/url]
[url]https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_up[/url]
[url]https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle[/url]