jQuery Basic Effects

jQuery Show () Method

The jQuery show() function call the css function .css( "display", "block") where display is a css property and block is the value to display element. This method doesn’t have any animation.

Syntax .show()

Note: In css, If the element has the !important property inline to the css styles then we need to override it by appending !important to the value of display attributes like css( "display", "block !important").

Consider the following example which contains p tag

Example $("button").click(function() { $("p").show( "slow" ); });
Try It Now

jQuery hide() Method

The hide() method works by calling .css( "display", "none") where display is a css property and none is the value to hide element. This method doesn’t have animation.

Syntax .hide()

Note: In css, If the element has the !important property inline to the css styles then we need to override it by appending !important to the value of display attributes like css( "display", "block !important").

Let us look at the following example to hide HTML element.

Example for ( var i = 0; i < 5; i++ ) { $( "<div>" ).appendTo( document.body ); } $( "div" ).click(function() { $( this ).hide( 3000, function() { $( this ).remove(); }); });
Output

Try It Now

jQuery toggle() Method

Before you understand about jquery toggle method try to understand these two jquery methods show and jquery hide

Syntax .toggle( [duration ] [ complete ] )

jQuery toggle() has a duration and functions parameters in order to make animation act upon the HTML element.

The following example illustrates how to use jquery toggle() method

Example $( "button" ).click(function() { $( "p" ).toggle(); });

The above example will toggle the paragraph, like hiding and showing it

Output

Try It Now



jQuery Effects Reference

Other Advanced jQuery Effects you might want to learn

jQuery Fading Effects

jQuery Sliding Effects

jQuery Custom Effects

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM