jQuery fadeIn() example

The jQuery fadeIn() method is used to fade in a hidden element.


  • The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
  • The optional callback parameter is a function to be executed after the fading completes.

Example 1

The following example demonstrates the fadeIn() method with different parameters:
<!DOCTYPE html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        $(document).ready(function() {
            $("button").click(function() {


    <p>Demonstrate fadeIn() with different parameters.</p>

    <button>Click to fade in boxes</button><br><br>

    <div id="div1" style="width:180px;height:100px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:180px;height:100px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:180px;height:100px;display:none;background-color:blue;"></div>
    <div id="div4" style="width:180px;height:100px;display:none;background-color:black;"></div>


Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
<!doctype html>
<html lang="en">

    <meta charset="utf-8">
    <title>fadeIn demo</title>
        span {
            color: red;
            cursor: pointer;

        div {
            margin: 3px;
            width: 80px;
            display: none;
            height: 80px;
            float: left;

        #one {
            background: #f00;

        #two {
            background: #0f0;

        #three {
            background: #00f;
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>


    <span>Click here...</span>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

        $(document.body).click(function() {


Try it Yourself - Copy paste code in Online HTML Editor to see the result


Free Spring Boot Tutorial - 5 Hours Full Course

Watch this course on YouTube at Spring Boot Tutorial | Fee 5 Hours Full Course