5 Useful Basic jQuery Syntax

Sam Deering
Tweet

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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?