การใช้งาน jQuery Effect Show

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

ก่อนอื่นต้องขออธิบายก่อนนะครับ ว่า Function show() ของ jQuery นี้ใช้ทำอะไรได้บ้าง มีประโยชน์อะไรบ้าง
function show ของ jQuery นี้ใช้ในการเปลี่ยน ค่าของ style sheet ของ Tag นั้นๆที่เราต้องการจะ hide หรือ show โดย เมื่อใช้ คำสั่ง show นี้ ค่าใน css ที่เป็นค่า display นั้นถูกกำหนดให้เป็น display หรือถ้าหากใช้ คำสั่ง hide ก็จะถูกกำหนดค่าให้เป็น none และยังมีการใส่ Animation ให้ด้วย โอ้มันยอดมากเลย!!

ตัวอย่าง :

<div id="myDIV" style="background-color:red;display:none">
       My DIV
</div>

จาก code ตัวอย่างนี้ DIV ที่สร้างขึ้นมานี้ จะมีสถานะเริ่มแรกเป็น hide คือไม่แสดงผลเพราะ display = none เราจะมาทำให้ DIV ตัวนี้แสดงผลออกมากัน ด้วยการใช้ คำสั่ง show()

ตัวอย่าง code html:

<div id="myDIV" style="background-color:red;display:none">
     My DIV
</div>
<input id="myBT" type="button" value="Click Here to Show DIV" >

ตัวอย่าง javascript :

<script>
   $("#myBT").click(function(){
          $("#myDIV").show();
   });
</script>

Demo :

จะเห็นได้ว่า jQuery นั้นใช้งานง่ายมากๆเลยใช่ใหมครับ เขียน code เพียงไม่กี่บรรทัด ก็สามารถทำงานได้ถึงขนาดนี้ ลองนึกดูว่าถ้าหากเราเขียนเองตั้งแต่เริ่มเลยละ มันจะยาวสักแค่ใหนนะ!! ลองนำไปทดสอบกันดูครับมันจะช่วยให้งานของคุณไปได้รวดเร็วขึ้นเยอะเลย ^-^