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>