jQuery Effects Complete Reference (original) (raw)

Last Updated : 23 Jul, 2025

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 `

<title>
    fadeIn() Method in jQuery
</title>

<style>
    #Outer {
        border: 1px solid black;
        padding-top: 40px;
        height: 140px;
        background: green;
        display: none;
    }
</style>

<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>

`

Output:

The complete list of jQuery Effects are given below: