Bài 3: Hiệu ứng chuyển động
Bài 3 sẽ là cách sử dụng hiệu ứng chuyển động (animate). Bạn sẽ học được cách đưa một element bất kỳ chuyển động theo ý mình.
Đầu tiên, chúng ta tạo một box HTML:
Trong ví dụ, tôi sẽ cho #box chuyển động bên trong #bound, chúng ta thêm style như sau
#bound {
width: 900px;
height: 600px;
border: 1px solid #666;
position: relative;
}
#box {
width: 300px;
height: 200px;
background: #0CF;
position: absolute;
left: 20px;
top: 20px;
}
Đặt thuộc tính khi click vào #box, #box sẽ chuyển động về bên trái 560px trong vòng 3s:
$('#box').click(function() {
$(this).animate({
"left" : "580px"
}, 3000)
});
Bạn có thể thay đổi hoặc thêm các chuyển động như trong ví dụ của bài. Chú ý thuộc tính CSS của #bound phải là position: relative để set lại tọa độ cho #box (absolute)

. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.