jQuery Basic Effects

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





jQuery Show () Method

jQuery show() method is used to show the content wrapped inside HTML elements.

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

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
Try It Now

jQuery hide() Method

jQuery hide() method simply hides the selected HTMLelements.


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


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
Output
jQuery hide() method
Try It Now

jQuery toggle() Method

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


jQuery toggle() method does both hiding and showing alternatively meaning if the element is initially displayed then it will be hidden, if the element is hidden then it will be shown. Internally toggle() method maintains the state of display property value.


Syntax

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

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

Output
jquery toggle() method
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