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)