Introduction:

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

 

Description:

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

Syntax:

 $(selector).fadeIn(speed ,callback)  

  • Example of jQuery fadeIn () method

Let's take an example to demonstrate jQuery fadeIn() Method.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            $("button").click(function () {
                $("#div1").fadeIn(); 
                });
        });
    </script> 
</head>
<body>    
    <button>Click to fade in boxes</button><br><br>
    <div id="div1" style="width:400px;height:80px;
     display:none;background-color:red;"></div><br>     
</body>
</html>

Output:



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

 


fadeIn() - Using the speed parameter

 

<script type="text/javascript">
     $(document).ready(function () {
         $("button").click(function () {
             $("#div1").fadeIn("slow");
         });
     });
 </script>

 

fadeIn() - Using the callback parameter

 

<script type="text/javascript">
     $(document).ready(function () {
         $("button").click(function () {
             $("#div1").fadeIn(3000, function () {
                 $(this).html("fadeIn() method is finished!");
             });
         });
     });
 </script>

 

 

I hope this article will help to you.

0 comments


Leave a comment

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

you may also like