มาต่อจากบทความ พื้นฐานการเขียน JQUERY PART1 มาเพิ่มการประยุคใช้เพิ่มกันต่อ
(http://2.bp.blogspot.com/-eqQpV0ajk0k/TreGEPlhfDI/AAAAAAAAAA4/YbYIcBDLV0w/s320/jquerybasics1.png)
Effects
Fading Out and In : $(selector).fadeOut() และ$(selector).fadeIn()
Sliding Up and Down : $(selector).slideUp() และ$(selector).slideDown()
Sliding Toggle : $(selector).slideToggle()
Custom animation effect : $(selector).animate()
การใช้ Fading Effect
ตัวอย่างนี้จะเป็นเกี่ยวกันการแสดงบทความแบบ สไลน์
ตัวอย่าง
http://pramooleasy.com/pgm-lesson/welcome5.php/
<script type="text/javascript">
$(function()
{
$('.fadeOut_box').click(function()
{
$('#box').fadeOut("slow");
//Sliding effect just replace fadeOut() to slideUp()
});
$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
//Sliding effect just replace fadeIn() to slideDown()
});
});
</script>
<body>
<a href="#" class="fadeOut_box">fadeOut()</a>
<a href="#" class="fadeIn_box">fadeIn()</a>
<div id="box"></div>
</body>
CSS code
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}
credit http://pgm-lesson.blogspot.com/
ขอบคุณครับ ที่ให้เครดิดผม
ถ้าจะใช้ fade, animation ใช้ html5 จะดีกว่าคับ เร็วกว่า เนียนกว่า แต่ก็ไม่รองรับ browser เก่าๆ
ขอบคุณคร้า ที่แบ่งปัน