Bài 7: Phương thức hover()

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

Bài 7 sẽ giới thiệu với các bạn phương thức hover() của jQuery, với phương thức này bạn có thể đặt trạng thái hover cho mọi thẻ HTML trên mọi trình duyệt

Bạn có thể xem trước ví dụ để thấy thay đổi khi di chuột qua các bức ảnh

Cấu trúc của hover() như sau:

$('div').hover(function() {
    // mã javascript
}, function() {
    // mã javascript
});

Trong ví dụ, trước tiên tôi dùng jQuery để đưa tất cả các ảnh về opacity 50%, sau đó khi di chuột vào ảnh bạn sẽ thấy opacity lên 100% và trở về 50% khi bạn di chuột ra ngoài

Mã HTML như sau:

 <div id="demohover">
    <img src="demopic/simpleslideshow/1.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/2.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/3.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/4.jpg" width="500" height="260" />
    <img src="demopic/simpleslideshow/5.jpg" width="500" height="260" />
</div>

Và mã javascript với jQuery

$(function() {
	$('#demohover img').animate({"opacity": .5 });
	$('#demohover img').hover(function() {
		$(this).animate({ "opacity": 1 });
	}, function() {
		$(this).animate({ "opacity": .5 });
	});
});

Sau bước này, bạn có thể di chuột liên tục qua 2 bức ảnh, sau đó di chuột ra ngoài sẽ thấy hiệu ứng vẫn tiếp tục, để gỡ lỗi này bạn có thể dùng stop() như sau:

$(function() {
	$('#demohover img').animate({"opacity": .5 });
	$('#demohover img').hover(function() {
		$(this).stop().animate({ "opacity": 1 });
	}, function() {
		$(this).stop().animate({ "opacity": .5 });
	});
});

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