Mặc dù jQuery chỉ là một thư viện JavaScript hỗ trợ các nhà lập trình web tạo ra các tương tác động trên website, nhưng nó ngày càng trở nên quan trọng hơn chúng ta nghĩ. Với sự đòi hỏi ngày càng cao của môi trường cũng như yêu cầu của khách hàng, các nhà thiết kế web đôi khi cũng phải biết sử dụng jQuery để có thể dễ dàng tạo một bố cục web tuyệt vời.

Trong bài viết này, tác giả hướng dẫn bạn (các nhà thiết kế web) xây dựng 10 hiệu ứng hoạt hóa hàng đầu, thường được dùng nhiều nhất trên các website, chẳng hạn như: ẩn hiện layer, khung trượt, chuyển ảnh, ...

Bạn không cần phải là một lập trình viên chuyên nghiệp để thực hiện các hiệu ứng trong bài viết này, tuy nhiên nếu bạn đang trở nên yêu thích jQuery thì hãy thử thêm những hiệu ứng sau:

- Tạo một trình diễn ảnh trượt với jQuery
- Hiệu ứng nẩy bật tuyệt đẹp với jQuery
- Các giải pháp trình đơn đa cấp siêu đẹp dùng jQuery

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

4a. Accordion #1

Here is a sample of accordion. (view demo)

The first line will add a CSS class "active" to the first <H3> element within the <div class="accordion"> (the "active" class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div class="accordion">.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the class="active".

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");

	});

});

4b. Accordion #2

This example is very similar to accordion#1, but it will let you specify which panel to open as default. (view demo)

In the CSS stylesheet, set .accordion p to display:none. Now suppose you want to open the third panel as default. You can write as $(".accordion2 p").eq(2).show(); (eq = equal). Note that the indexing starts at zero.

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});

5a. Animated hover effect #1

This example will create a nice animated hover effect with fade in/out. (view demo)

When the menu link is mouseovered, it will find the next <em> and animate its opacity and top position.

$(document).ready(function(){

	$(".menu a").hover(function() {
	  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
	  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});

5b. Animated hover effect #2

This example will get the menu linktitle attribute, store it in a variable, and then append to the <em> tag. (view demo)

The first line will append an empty <em> to the menu <a> element.

When the link is mouseovered, it will get thetitle attribute, store it in a variable "hoverText", and then set the <em> text content with the hoverText's value.

$(document).ready(function(){

	$(".menu2 a").append("<em></em>");

	$(".menu2 a").hover(function() {
	  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
	  var hoverText = $(this).attr("title");
	  $(this).find("em").text(hoverText);
	}, function() {
	  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});

6. Entire block clickable

This example will show you how to make the entire block element clickable as seen on my Best Web Gallery's sidebar tabs. (view demo)

Suppose you have a <ul> list with class="pane-list" and you want to make the nested <li> clickable (entire block). You can assign the click function to ".pane-list li"; and when it is clicked, the function will find the <a> element and redirect the browser location to its href attribute value.

$(document).ready(function(){

	$(".pane-list li").click(function(){
	  window.location=$(this).find("a").attr("href"); return false;
	});

});

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới