Skip to content
Related Articles

Related Articles

jQuery Effects Complete Reference

Improve Article
Save Article
  • Last Updated : 25 Nov, 2022
Improve Article
Save Article

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

jQuery animate() MethodThis is used to change the state of the element with CSS style. 
jQuery clearQueue() MethodThe jQuery clearQueue() method removes all items from the queue that have not yet been run
jQuery delay() MethodThis  is used to set a timer to delay the execution of the next item in the queue
jQuery dequeue() MethodThis is used to remove the next function from the queue and then it will execute the function.
jQuery fadeIn() MethodThis is used to change the opacity of selected elements from hidden to visible. 
jQuery fadeOut() MethodThis is used to change the level of opacity for selected elements from visible to hidden.
jQuery fadeTo() MethodThe fadeTo() method is an inbuilt method in jQuery that is used to change the opacity of the selected element. 
jQuery fadeToggle() Method If elements are faded out, fadeToggle() will fade in and vice versa. 
jQuery finish() MethodThis is used to stop the animations running at the present time.
jQuery hide() MethodThe hide() is an inbuilt method in jQuery used to hide the selected element. 
jQuery queue() MethodThe queue() method can be used with the dequeue() method.
jQuery show() MethodThe show() Method in jQuery is used to display the hidden and selected elements. 
jQuery slideUp() MethodThe slideUp() is an inbuilt method in jQuery that is used to hide the selected elements. 
jQuery stop() MethodThis is used to stop the currently running animations for the selected element. 
jQuery toggle() MethodThe toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!