เมื่อหลายวันก่อนเปิดหน้าเว็บ Google แล้วไปเจอลูก Apple ตกลงมา อ๋อวันเกิดของ นิวตัน นี่เอง แต่จากวันนั้นมีหลายคนถามครับว่า รูป Apple ที่ตกลงมานั้น เขาทำ Animation อย่างไรให้ภาพมันตกลงมาแล้วก็กระเด้งๆๆ วันนี้เปิดๆหาข้อมูลของ jQuery ก็ไปเจอเว็บหนึ่งครับ ที่ทำพวก Effect สำหรับทำ Animation ไว้เยอะพอดูเลยละ ลองเข้าไปทดสอบกันดูครับ มี Effect ให้เลือกใช้เยอะเลย ตัวอย่างการเรียกใช้งาน 1   $("#element").effect([speed, callback]); Demo : Click here Web site : http://net.tutsplus.com

เอาล่ะครับเรารู้จัก Effect slideDown และ slideUp ไปแล้ว การทำงานของ 2 Effect ที่กล่าวมาก็คือการ แสดงหรือซ่อนนั่นเอง แต่วันนี้เรามีอีก Effect หนึ่งซึ่งรวมเอาการทำงานของทั้ง 2 Effect เข้าด้วยกัน นั่นก็คือ Effect slideToggle รูปแบบของคำสั่งนี้ slideToggle( speed, [callback] ) Arguments speed รับค่าเป็น String และ number โดยมีค่าดังนี้ครับ (“slow”, “def”, or “fast”) หรือตัวเลข มีหน่วยเป็นมิลิวินาที เช่น 1000 callback นั้นเป็น option คือจะใส่หรือไม่ก็ได้ option นี้เราสามารถใส่ function ที่ต้องการให้ทำงานหลังจากจบการทำงานของ slideToggle เสร็จแล้ว

ในครั้งก่อนเราได้รู้จัก Effect slideDown ไปแล้ว คราวนี้จะมารู้จัก Effect slideUp กันบ้างครับ การทำงานจะตรงกันข้ามกับ slideDown ซึ่งก็คือการ Hide นั่นเองครับ รูปแบบของคำสั่งนี้ slideUp( speed, [callback] ) Arguments speed รับค่าเป็น String และ number โดยมีค่าดังนี้ครับ (“slow”, “def”, or “fast”) หรือตัวเลข มีหน่วยเป็นมิลิวินาที เช่น 1000 callback นั้นเป็น option คือจะใส่หรือไม่ก็ได้ option นี้เราสามารถใส่ function ที่ต้องการให้ทำงานหลังจากจบการทำงานของ slideUp เสร็จแล้ว

วันนี้เราจะมาแนะนำ Effect slideDown ครับ รูปแบบของคำสั่งนี้ slideDown( speed, [callback] ) Arguments speed รับค่าเป็น String และ number โดยมีค่าดังนี้ครับ (“slow”, “def”, or “fast”) หรือตัวเลข มีหน่วยเป็นมิลิวินาที เช่น 1000 callback นั้นเป็น option คือจะใส่หรือไม่ก็ได้ option นี้เราสามารถใส่ function ที่ต้องการให้ทำงานหลังจากจบการทำงานของ slideDown เสร็จแล้ว

วันนี้มารู้จักกับ effect ของ jquery อีกตัวหนึ่งครับ นั้นก็คือ fadeIn ครับ มาดูกันเลยแล้วกันครับว่ามันทำงานอย่างไร รูปแบบของคำสั่งนี้ fadeIn( speed, [callback] ) Arguments speed รับค่าเป็น String และ number โดยมีค่าดังนี้ครับ (“slow”, “def”, or “fast”) หรือตัวเลข มีหน่วยเป็นมิลิวินาที เช่น 1000 callback นั้นเป็น option คือจะใส่หรือไม่ก็ได้ option นี้เราสามารถใส่ function ที่ต้องการให้ทำงานหลังจากจบการทำงานของ fadeIn เสร็จแล้ว

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

ก่อนอื่นต้องขออธิบายก่อนนะครับ ว่า 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>