JavaScript

5 Useful Basic jQuery Syntax

Sam Deering
Share

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