jQuery Effects slideToggle

An article by Pachai Leknettip    No Comments

เอาล่ะครับเรารู้จัก 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 เสร็จแล้ว

ตัวอย่าง code:

HTML

<div style="background-color:#333333;" > <a id="top" href="javascript:void(0);">Show</a> </div>
<div id="testDIV" style="height:100px;display:none;background-color:red">DEMO</div>

jQuery

<script type="text/javascript">
          $(document).ready(function(){
            $("#top").click(function(){
                  $("#testDIV").slideToggle("slow");
                  if ($("#top").text() == "Show"){
                    $("#top").text("Hide");
                  }else{
                    $("#top").text("Show");
                  }
            });
          });
</script>

Demo