.fadeOut() - Effects , jQuery |
.fadeOut() เป็นการใช้ Effects กับ .fadeOut() แสดงคุณสมบัติของ element ที่อ้างถึงให้ค่อย ๆ จางขึ้น
Syntax
.fadeOut( [duration,] [callback] )
.fadeOut( [duration,] [easing,] [callback] )
Example 1 ตัวอย่างการใช้งาน .fadeOut()
EffectsfadeOut1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { font-size:150%; cursor:pointer; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").fadeOut("slow");
});
});
</script>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .fadeOut() ในการจัดการกับ element ที่อ้างถึง โดยในตัวอย่าง $("p").fadeOut("slow"); เมื่อคลิกจะค่อย ๆ จางจนหายไป
Example 2 ตัวอย่างการใช้งาน .fadeOut()
EffectsfadeOut2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
span { cursor:pointer; }
span.hilite { background:yellow; }
div { display:inline; color:red; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").click(function () {
$(this).fadeOut(1000, function () {
$("div").text("'" + $(this).text() + "' has faded!");
$(this).remove();
});
});
$("span").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
});
</script>
</head>
<body>
<h3>Find the modifiers - <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .fadeOut() ในการจัดการกับ element ที่อ้างถึง และเทคนิคการใช้ fadeOut หรืลองคลิกที่ Demo เพื่อดูผลลัพธ์
Example 3 ตัวอย่างการใช้งาน .fadeOut()
EffectsfadeOut3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
.box,
button { float:left; margin:5px 10px 5px 0; }
.box { height:80px; width:80px; background:#090; }
#log { clear:left; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function() {
function complete() {
$("<div/>").text(this.id).appendTo("#log");
}
$("#box1").fadeOut(1600, "linear", complete);
$("#box2").fadeOut(1600, complete);
});
$("#btn2").click(function() {
$("div").show();
$("#log").empty();
});
});
</script>
</head>
<body>
<button id="btn1">fade out</button>
<button id="btn2">show</button>
<div id="log"></div>
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ Effects กับ .fadeOut() ในการจัดการกับ element ที่อ้างถึง และเทคนิคการทำให้จางด้วย fadeOut
ลิ้งค์ที่ควรศึกษา
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:43:21 /
2017-03-19 14:06:47 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|
|
Load balance : Server 02
