1) Hide/Show

This is used to hide or show html elements with no effects. Use this if you want to quickly hide or show some html elements.

  • Syntax: hide(), show()

EXAMPLE :

$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").hide();
	});
	$(".btn2").click(function(){
		$("p").show();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide

2) Fade in/Fade out

This involves of hiding and showing html elements using nice fading effects. It is well used when you want to show or hide a div and its content in a nice way.

  • Syntax: fadeIn(), fadeout()

EXAMPLE:

$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").fadeOut()
	});
	$(".btn2").click(function(){
		$("p").fadeIn();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

3) Stop

If you want to stop currently running animations just use this.

  • Syntax: stop()

EXAMPLE:

$(document).ready(function(){
	$("#start").click(function(){
		$("div").animate({height:300},3000);
	});
	$("#stop").click(function(){
		$("div").stop();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop

4) Animate

A nice syntax that makes changes to an element from one state to another with CSS styles. It just gradually changes the CSS property value, which will result to animation effects.

  • Syntax: animate()

EXAMPLE:

$(document).ready(function()
{
	$("#btn1").click(function(){
		$("#box").animate({height:"300px"});
	});
	$("#btn2").click(function(){
		$("#box").animate({height:"100px"});
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

5) Slide Toggle

This syntax is greatly used in various websites that uses jQuery. Ideally it is just to hide and show an html element, but in a very nice sliding effect just like the left side bar menu in administrator area of a typical WordPress website.

  • Syntax: slideToggle()

EXAMPLE:

$(document).ready(function(){
	$("button").click(function(){
		$("p").slideToggle();
	});
});

LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Pingback: Show jQuery Source Code In Your WordPress Blog | jQuery4u()

  • http://www.aerospaceengineeringnow.com aerospace engineering jobs

    Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work!

  • http://www.cna-trainingclasses.com CNA Training

    Great site. A lot of useful information here. I’m sending it to some friends!

  • http://www.socialworkersguide.com social workers

    Keep posting stuff like this i really like it

  • Pingback: My jQuery Blog | The Coding Magician()

  • http://http://titop-lesma.livejournal.com.livejournal.com plaskottfran

    “Ideally it is just to hide and show an html element, but in a very nice sliding effect just like the left side bar menu in administrator area of a typical WordPress website.”
    Where else can I read about this?

  • neelisha

    Thanks for your details and explanations..I want more information from your side..please include some valuable ideas..I Am working in refurbished laptops in chennaishould you need for any other clarification please call in this number.044-421 27512.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.