jQuery Effects
jQuery Effects
วันนี้โปรแกรมเมอร์กากกาก จะมานำเสนอ JQuery Effects กันนะครับ เราลองมาดูกัน
jQuery Effects คืออะไร
jQuery Effects ยกตัวอย่างเช่น การซ่อน(hide) , แสดง(show) , สลับ(toggle) , จางหาย(fade) และเคลื่อนไหว(animate) เป็นต้น
JQueryHide and Show
เราลองมาดูกันแสดงความสามารถของ JQuery ในการซ่อนหรือแสดงอิลิเมนต์ใช้เมธอด hide() และ show() ตามลาดับ
รูปแบบ JQueryHide and Show
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
โดย speedอาจกาหนดเป็น “slow” , “fast” , “normal” หรือเป็นมิลลิวินาที ก็ได้ callback คือ ฟังก์ชันที่จะให้ทางานหลังจากซ่อน หรือ แสดง อิลิเมนต์แล้ว เราลองมาดู Code JQuery กันเลยดีกว่านะครับ
ตัวอย่างการใช้ JQuery hide() และ show()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
jQuery Toggle
jQuery Toggle ใช้สาหรับสลับการแสดงผลของHTML element ให้ซ่อนหรือแสดง และ แสดงอิลิเมนต์ที่ถูกซ่อนอยู่ หรือ ซ่อนอิลิเมนต์ที่แสดงอยู่
รูปแบบ jQuery Toggle
$(selector).toggle(speed,callback)
โดย speedอาจกาหนดเป็น “slow” , “fast” , “normal” หรือเป็นมิลลิวินาที ก็ได้ callback คือ ฟังก์ชันที่จะให้ทางานหลังจากซ่อน หรือ แสดง อิลิเมนต์แล้ว เราลองมาดู Code jQuery Toggle กันเลยดีกว่านะครับ
ตัวอย่างการใช้ jQuery Toggle()
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button><p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
สำหรับบทความ JQuery Effects ก็ขอจบไว้เพียงเท่านี้นะครับหวังว่าคงเป็นประโยชน์ต่อผู้ที่สนใจนะครับ
Categories
:
JQuery
,
jQuery Effects
0 ความคิดเห็น :
แสดงความคิดเห็น