Bài 3: Hiệu ứng chuyển động

Đăng bởi Neo trong mục Hướng dẫn vào 30 tháng 11, 2009 | Comments

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)

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. 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.

Trang chủ - Twitter