บทที่ 5 jQuery Effect ตอนที่ 5 (Fade)
Fade แปลว่าเลือนลาง
Fade เป็นเมธอดของ jQuery ที่ใช้เพื่อทำให้ object ต่างๆที่เราสร้างขึ้นเลือนลาง หรืออาจใช้เพื่อให้ทำให้ object ที่เลือนลางอยู่แล้วชัดเจนขึ้น
fade method นั้นแบ่งเป็น 4 แบบดังนี้
| fade Method |
คำอธิบาย |
| fadeIn() | จากที่เลือนลาง ก็ทำให้ชัดเจน |
| fadeOut() | จากที่ชัดเจน ก็ทำให้เลือนลาง |
| fadeToggle() | สลับไปมา ระหว่างเลือนลาง กับชัดเจน |
| fadeTo() | เป็นคำสั่งที่ช่วยกำหนดระดับความเลือนลาง ซึ่งค่าที่ใช้กำหนดจะอยู่ในช่วง 0-1 (ถ้าใกล้ 0 หรือเป็น 0 แปลว่าเลือนลางมากสุด มองไม่เห็นเลย ,แต่ถ้าใกล้ 1 จะยิ่งชัดเจน หรือถ้าเป็น 1 คือชัดที่สุด ) |
1. fadeIn() method
มี syntax ดังนี้
$(selector).fadeIn(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn(5000);
$("#div2").fadeIn();
$("#div3").fadeIn("slow");
});
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeIn method</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>คลิกดูตัวอย่าง fadeIn method
2. fadeOut() method
มี syntax ดังนี้
$(selector).fadeOut(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:yellow;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>คลิกดูตัวอย่าง fadeOut method
***เปรียบเทียบระหว่าง fadeIn กับ fadeOut จะเห็นว่าทั้งสองตัวอย่างนี้ นอกจากจะแตกต่างที่ตัว syntax แล้ว ยังมีตัวคำสั่งที่อยู่ภายในแท็ก <div> ที่แตกต่างกันด้วย นั้นคือคำสั่ง display:none ซึ่งมีอยู่ใน fadeIn method แต่ไม่มีใน fadeOut method ตัวคำสั่ง display:none เป็นคำสั่งที่สั่งไม่มีการแสดง object
-ในตัวอย่างที่ 1 เราจะเห็นว่าในตอนแรกไม่มี object ปรากฎ เนื่องจากคำสั่ง display:none และเมื่อมีการคลิก object จึงปรากฎ
-ในตัวอย่างที่ 2 เราจะเห็นว่าในตอนแรกมี object ปรากฎอยู่แล้ว เนื่องจากไม่มีคำสั่ง display:none และเมื่อมีการคลิก object จึงหายไป
(เเท็ก <div> คือแท็กที่ใช้ในการสร้าง object)
3. fadeToggle() Method
มี syntax ดังนี้
$(selector).fadeToggle(speed,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่างการใช้ fadeOut method</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
คลิกดูตัวอย่าง fadeToggle method
4. fadeTo() Method
มี syntax ดังนี้
$(selector).fadeTo(speed,opacity,callback);ตัวอย่างเช่น
<html>
<head>
<meta charset="utf8">
<script src="/jquery-1.9.1.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",1);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.1);
});
});
</script>
</head>
<body>
<p>คลิกดูตัวอย่าง fadeTo method </p>
<button>Click to fade boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>