Cấp bậc tác giả:

HTML

Hướng dẫn xây dựng hàm Slide trong Jquery

Được viết bởi webmaster ngày 21/02/2017 lúc 10:14 PM
Bài này hướng dẫn làm hiểu ứng chuyển động lên xuống bằng click chuột thông qua Jquery
  • 0
  • 6821

Hướng dẫn xây dựng hàm Slide trong Jquery

Bài này hướng dẫn làm hiểu ứng chuyển động lên xuống bằng click chuột thông qua Jquery.
Đầu tiên, xây dựng trang HTML với thư viện jquery tương ứng:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Sau đó thêm các thuộc tính HTML vào trang:
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
Thêm CSS để có giao dienẹ như mong muốn:
<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
}
</style>
Tiếp theo xây dựng hàm xử lý
<script> 
$(document).ready(function(){
var i=1;
    $("#flip").click(function(){
    if(i==1){
        $("#panel").slideUp("slow");
        i=0;return;
        }
        if(i==0){
         $("#panel").slideDown("slow");
         i=1;
         return;
        }
    });
});
</script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML