พิมพ์หน้านี้ - พื้นฐานการเขียนJquery Part 2

ไทย เสียว บอร์ด => Tutorial (ห้ามตั้งคำถามห้องนี้) => ข้อความที่เริ่มโดย: banchawaipea ที่ 19 พฤศจิกายน 2011, 19:39:56

หัวข้อ: พื้นฐานการเขียนJquery Part 2
เริ่มหัวข้อโดย: banchawaipea ที่ 19 พฤศจิกายน 2011, 19:39:56

มาต่อจากบทความ พื้นฐานการเขียน 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/

หัวข้อ: Re: พื้นฐานการเขียนJquery Part 2
เริ่มหัวข้อโดย: wawasaki ที่ 19 พฤศจิกายน 2011, 19:42:48

ขอบคุณครับ ที่ให้เครดิดผม

หัวข้อ: Re: พื้นฐานการเขียนJquery Part 2
เริ่มหัวข้อโดย: bonshington ที่ 19 พฤศจิกายน 2011, 19:51:35

ถ้าจะใช้ fade, animation ใช้ html5 จะดีกว่าคับ เร็วกว่า เนียนกว่า แต่ก็ไม่รองรับ browser เก่าๆ

หัวข้อ: Re: พื้นฐานการเขียนJquery Part 2
เริ่มหัวข้อโดย: Taew2011 ที่ 06 ธันวาคม 2011, 15:23:33

ขอบคุณคร้า ที่แบ่งปัน

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com