.show() - Effects , jQuery |
.show() เป็นการใช้ Effects กับ .show() ใช้สำหรับแสดง หรือ show element ซึ่ง ตรงกันข้ามกับ .hide()
Syntax
.show()
.show( duration, [callback] )
.show( [duration,] [easing,] [callback] )
Example 1 ตัวอย่างการใช้งาน .show()
Effectsshow1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { background:yellow; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$("p").show("slow");
});
});
</script>
</head>
<body>
<button>Show it</button>
<p style="display: none">Hello 2</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .show() ในการจัดการกับ element ที่อ้างถึง
Example 2 ตัวอย่างการใช้งาน .show()
Effectsshow2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .show() ในการจัดการกับ element ที่อ้างถึง
Example 3 ตัวอย่างการใช้งาน .show()
Effectsshow3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function doIt() {
$("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("fast");
/* to stop the submit */
return false;
});
});
</script>
</head>
<body>
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
<form>
<input type="text" value="as;ldkfjalsdf"/>
</form>
</div>
<p style="display:none;">I'm hidden...</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .show() ในการจัดการกับ element ที่อ้างถึง
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery Effects : jQuery and Effects
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:44:13 /
2017-03-19 14:07:46 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|
