jQuery is becoming more important than we think, although it's just JavaScript framework to help web coders, web programmers write the interactive tasks. However, with the higher requirements of modern web development, web designers must use jQuery to create a awesome web layout. Herein, the author guides you how to build top ten most-wanted jQuery effects: animated jQuery hover effects, jQuery slide DIV, jQuery image transition, jQuery UI accordion, ...

For these jQuery examples in this JavaScript article, you do not need to be expert to learn, but if you're loving jQuery then try more jQuery articles and tutorials:

- Create Sliding Photo Gallery using jQuery
- Amazing Bounce Effect using jQuery framework
- Super Amazing jQuery Dynamic Navigation Menu Solutions

• Demo
• Enlarge
• Reload
• New window

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;
	});

});

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New