การใช้งาน Effect show ขึ้นสูง (Advance)

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

ในเนื้อหานี้เราจะมาเรียนรู้วิธีการใช้งาน คำสั่ง show ของ jquery effect ในแบบ Advance กันบ้างนะครับ คำสั่ง Show() นั้นเราสามารถกำหนดทั้งความเร็ว ในการ show หรือจะให้มีการ call back กับมาเมื่อมีการทำงานเสร็จสิ้นแล้ว (call back คือการที่เราจะสามารถใส่ function อะไรเข้าไปเพิ่มเติมเพื่อให้โปรแกรม อีกโปรแกรมทำงานต่อ หลังจากโปรแกรมหลักทำงานเสร็จแล้ว)

รูปแบบของคำสั่ง :

show( speed , [callback] );

มาดูตัวอย่างกันครับ ผมจะยกตัวอย่างเพื่อให้เข้าใจง่ายยิ่งขึ้นในการใช้งานนะครับ ผมจะสร้าง tag DIV ขึ้นมาทั้งหมด 3 ตัว และกำหนด css ให้กับ DIV ทั้งสามนั้นให้ display = none ใว้ก่อน เพื่อไม่ให้แสดงผล

HTML Code:

<div id="div1" style="display:none;background-color:red;">DIV1</div>
<div id="div2" style="display:none;background-color:blue;">DIV2</div>
<div id="div3" style="display:none;background-color:gray;">DIV3</div>

<input id="myBT" type="button" value="click here!!" />

jQuery Code :

$("document").ready( function(){
       $("#myBT").click(function(){
                   $("#div1").show("fast", function(){
                         $("#div2").show("fast", function(){
                              $("#div3").show("fast");
                         });
                   });
        });
} );

ตัวอย่าง :

จากตัวอย่างที่เพื่อนๆทดได้ลองเล่นดู ก็จะเห็นว่า การแสดงผลของ DIV นั้น จำแสดงผลต่อเนื่องกัน คือ เมื่อ กดที่ปุ่ม click here DIV1 ก็จะเริ่มแสดงผล และหลังจากนั้นเมื่อ div1 แสดงผลเสร็จ ก็จะเกิดขึ้นตอนของการ callback หรือติดต่อกลับมาที่โปรแกรม ที่ทำงานไปเมื่อสักครู่ ดังนั้นเราจึงสามารถ ที่จะเขียน โปรแกรม หรือ เขียนขั้นตอนการทำงานอื่นๆเพิ่มขึ้นมาได้ เช่น หลังจากที่ DIV1 ทำงานแล้วและ callback กับมาที่ function show อีกครั้งเราอาจจะเขียนให้ทำการ hide ตัวเองไป หรือจะสั่งให้ hide DIV ตัวอื่นที่เราเขียนขึ้นมาก็ได้นะครับ

หากติดปัฐหาตรงใหนก็ post สอบถามได้เลยครับ