พื้นฐานการเขียนJquery Part 2

เริ่มโดย banchawaipea, 19 พฤศจิกายน 2011, 19:39:56

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

banchawaipea

19 พฤศจิกายน 2011, 19:39:56
มาต่อจากบทความ  พื้นฐานการเขียน JQUERY PART1 มาเพิ่มการประยุคใช้เพิ่มกันต่อ


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/

wawasaki

#1
19 พฤศจิกายน 2011, 19:42:48 แก้ไขล่าสุด: 19 พฤศจิกายน 2011, 19:43:33 โดย wawasaki
ขอบคุณครับ ที่ให้เครดิดผม

[direct=http://www.waipia.com]รับงานสำรวจ รังวัดเอกชน สอบเขต แบ่งแยก รวมโฉนด[/direct]
รับเขียนเว็บไซต์ ออกแบบระบบ

bonshington

#2
19 พฤศจิกายน 2011, 19:51:35
ถ้าจะใช้ fade, animation ใช้  html5 จะดีกว่าคับ เร็วกว่า เนียนกว่า แต่ก็ไม่รองรับ browser เก่าๆ

Taew2011

#3
06 ธันวาคม 2011, 15:23:33
ขอบคุณคร้า ที่แบ่งปัน
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้