In this article we will explain how to display hidden elements in jQuery or What is fadeIn() method in jQuery or why use fadeIn() method in jQuery with example.


The jQuery fadeIn() method is used to fade in all matched hidden elements. It’s change the opacity of selected elements from hidden to visible (fading effect).


$(selector).fadeIn(speed ,callback) 

Let’s see simple jQuery fadeIn() method with Example:

<!DOCTYPE html>
<html xmlns="">
    <title>Example of jQuery fadeIn method </title>
<script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
    <button>Click to fade in boxes</button><br><br>
    <div id="div1" style="width:400px;height:80px;

In above example we have a hidden “div” and button when we click on button then “div” show.

Thanks for reading this article.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like