Open In App

jQuery Effects Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
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