jQuery Display Effect

Introduction to jQuery Display Effects

jQuery display effects enhance the interactivity of your website. jQuery offers a trivially simple interface for performing numerous spectacular effects such as show, hide, fade-in, fade-out, slide-up, slide-down, toggle, and so on.

Using jQuery methods, we can easily apply commonly used effects with minimal preparation. This lesson will go through all of the essential jQuery methods for creating visual effects.

Table of jQuery Display Effects

About show(), hide() and toggle() method in detail

jQuery Effects - Hiding Elements

The hide() method in jQuery provides a simple syntax for hiding an element:

Syntax:

Parameters:

You can use any jQuery selector to select any DOM element and then hide it using the jQuery hide() method. Here is a description of all the options that allow you to have complete control over the hiding effect.

• Speed - This optional parameter represents one of three predetermined speeds ("slow," "normal," or "rapid") or the number of milliseconds for the animation to run (e.g., 1000).
• Callback - This optional argument represents a function that will be executed when the animation is finished. It will be executed once for each animated element.

Example:

Here's an example of a <div> that hides when we hover our mouse over it. We set the speed option to 1000, which means that the hidden effect will be applied to the clicked element in one second.

When you run this code to see the output, you can see the boxes disappearing when you click on them.

jQuery Effects - Show Elements

With the help of the show() method, jQuery provides a straightforward syntax for displaying a hidden element.

Syntax:

Parameters:

You can use any jQuery selector to choose a DOM element and then show it using the jQuery show() method. Here is a description of all the settings that allow you to modify the show effect.

• Speed - An optional string specifying one of three predefined speeds ("slow," "normal," or "rapid") or the amount of milliseconds for the animation to run (e.g., 1000).
• Callback - This optional argument represents a function that will get executed when the animation is finished. It will get executed once for each animated element.

Example:

Here's an example of how we can use two buttons to interact with a Box. These two buttons will be used to show and hide this Box. To demonstrate the difference in effect speed, we utilized various speeds for the two effects hide(5000) and show(1000).

You can see the output by running this HTML code on a browser. The box will be hidden when you click on the "Hide Box" button and it will be shown when you click on the "Show Box" button.

jQuery Effects - Toggle Elements

Toggling the display state of elements between disclosed and concealed is made possible by jQuery's toggle() functions. If the element is initially visible, it will be hidden; if it is not visible, it will be shown.

Syntax:

Parameters:

You can use any jQuery selector to choose a DOM element and then toggle it using the jQuery toggle() method. Here is a description of all the options that allow you to have complete control over the toggle effect.

• Speed - This is an optional string specifying one of three predefined speeds ("slow," "normal," or "rapid") or the amount of milliseconds for the animation to run (e.g., 1000).
• Callback - An optional argument representing a function that will get executed when the animation is completed. It will be executed once for each animated element.

Example:

Here's an example of how we can use a single Toggle button to manipulate a Square Box. When we first click this button, the square box becomes invisible, and when we click it again, the square box becomes visible. We set the speed parameter to 1000, which implies the toggle effect will be applied in one second.

You can see the output by running the above HTML code on any browser. When you click the "Toggle Box" button, you will see the toggle effect on the box.