jQuery Display Effect

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning

Overview

jQuery allows us to apply effects to web pages. jQuery effects are classified as fading, sliding, hiding/showing, and animation. jQuery has numerous methods for creating effects on a web page.

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

Sl. NoMethodDescription
1animate()Run a custom animation on the items you've chosen.
2clearQueue()Removes all remaining pending functions from the elements that have been selected.
3delay()Delays all queued functions on the specified items.
4dequeue()Dequeue the next function before running the function.
5fadeIn()Fades in the chosen elements
6fadeOut()The selected elements have faded out.
7fadeTo()The selected items are faded in and out to a specified opacity.
8fadeToggle()The fadeIn() and fadeOut() functions are toggled.
9finish()All queued animations for the specified elements are stopped, removed, and completed.
10hide()The selected items are hidden.
11queue()Displays the functions that have been queued on the specified elements.
12show()Displays the elements that were chosen.
13slideDown()Slides down to reveal the selected elements
14slideToggle()The slideUp() and slideDown() functions are toggled.
15slideUp()The selected pieces are slid up (hidden).
16stop()Stops the current animation for the elements that have been selected.
17toggle()The hide() and display() functions are toggled.

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.

Conclusion

  • It is worth spending time learning this library as it provides beautiful website effects.
  • jQuery display effects will be an important aspect of site development with a little coding.
  • It includes all the tools required to create an interactive and entertaining website.