jQuery Effect fadeIn

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

วันนี้มารู้จักกับ effect ของ jquery อีกตัวหนึ่งครับ นั้นก็คือ fadeIn ครับ มาดูกันเลยแล้วกันครับว่ามันทำงานอย่างไร

รูปแบบของคำสั่งนี้

fadeIn( speed, [callback] )

Arguments

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

ตัวอย่าง code:

HTML

<input id="btnClick" type="button" value="example click here" />
<div id="testDIV" style="display:none;background-color:red">DEMO</div>

jQuery

<script type="text/javascript">
          $(document).ready(function(){
            $("#btnClick").click(function(){
                  $("#testDIV").fadeIn("slow");
            });
          });
</script>

Demo