jQuery Effects slideUp

An article by Pachai Leknettip    No Comments

ในครั้งก่อนเราได้รู้จัก Effect slideDown ไปแล้ว คราวนี้จะมารู้จัก Effect slideUp กันบ้างครับ การทำงานจะตรงกันข้ามกับ slideDown ซึ่งก็คือการ Hide นั่นเองครับ

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

slideUp( speed, [callback] )

Arguments

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

ตัวอย่าง code:

HTML

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

jQuery

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

Demo