jQuery effect methods are used to perform various effects such as hide, show, slide, animate etc., on the selected elements. jQuery offers numerous effect methods that can be used to easily to manipulate HTML elements, perform data manipulations and enable user interaction based manipulations.
Although the inbuilt effect methods offer most of the features right out of the box, the methods like animate, delay, finish etc., allows the users to write custom actions to perform various manipulations on the HTML page. The categorized list of jQuery effects has been displayed in the table mentioned below.
List of jQuery Effects
| Method | Description |
| Basic Effects | |
| hide() | Hides the selected HTML element by applying the CSS property display : none |
| show() | Displays the HTML elements that were hidden through hide() method or directly through the CSS property display : none |
| toggle() | Toggles the HTML elements by showing and hiding the selected HTML element based on the user action. This method is basically the combination of both hide() and show() |
| Sliding Effects | |
| slideDown() | Displays the selected HTML element with a sliding motion effect. The only difference between show() and slideDown() methods is the sliding effect applied while displaying the element |
| slideUp() | Hides the selected HTML element with a sliding motion effect. The sliding effect is applied in-addition to the functionality of hide() method |
| slideToggle() | This is a combination of slideDown() and slideUp() methods. Based on the user action, the HTML elements are displayed or hidden with a sliding effect |
| Fading Effects | |
| fadeIn() | Displays the selected HTML element with a fading effect by manipulating their opacity from transparent to clear |
| fadeOut() | Hides the selected HTML element with a fading effect by changing the opacity to transparent |
| fadeTo() | Allows the user to specify the level of opacity to which the selected element should be faded |
| fadeToggle() | Displays or hides the selected HTML element based on the user action with a fading effect. This is a combination of fadeIn() and fadeOut() methods |
