Open In App
Related Articles

jQuery Effects Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

jQuery provides a trivially simple interface for doing various kinds of amazing effects. jQuery Effects are used to create commonly used visual effects. 

Syntax:

$(selector).effect.method(para1, para2, ...);

Example: This example describes fadeIn() method with speed 1000 millisecond

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
      
    <title>
        fadeIn() Method in jQuery
    </title>
  
    <style>
        #Outer {
            border: 1px solid black;
            padding-top: 40px;
            height: 140px;
            background: green;
            display: none;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <div id="Outer">
        <h1 style="color:white;">
            GeeksForGeeks
        </h1>
    </div><br>
  
    <button id="btn">
        Fade In
    </button>
  
    <!-- jQuery script of fadeIn() method -->
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#Outer").fadeIn(1000);
            });
        });
    </script>
</body>
  
</html>

                    

Output:

 

The complete list of jQuery Effects are given below:

jQuery Effects

Description

Example

animate()Change the state of the element with CSS style. 
Try
clearQueue()Removes all items from the queue that have not yet been run
Try
delay()Set a timer to delay the execution of the next item in the queue
Try
dequeue()Remove the next function from the queue and then it will execute the function.
Try
fadeIn()Change the opacity of selected elements from hidden to visible. 
Try
fadeOut()Change the level of opacity for selected elements from visible to hidden.
Try
fadeTo()Change the opacity of the selected element. 
Try
fadeToggle()If elements are faded out, fadeToggle() will fade in and vice versa. 
Try
finish()Stop the animations running at the present time.
Try
hide()Hide the selected element. 
Try
queue()It is used with the dequeue() method.
Try
show()It is used to display the hidden and selected elements. 
Try
slideUp()Hide the selected elements. 
Try
stop()Stop the currently running animations for the selected element. 
Try
 toggle()Check the visibility of selected elements to toggle between hide() and show() for the selected elements.
Try


Last Updated : 30 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads