Introduction:

In this article we will explain how to  hide elements using fadeOut() in jquery or What is fadeOut() method in jquery or why use fadeOut() method in jquery with example.

Description:

The jQuery fadeOut() method is used to fade Out all matched elements. It’s change the opacity to 0 of selected elements and setting the inline style display:none.

Syntax:

$(selector).fadeOut(speed,callback)

Example of jQuery fadeOut () method

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

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

 

OutPut:


how to use jQuery fadeOut() Method

In above example we have a “div” and button when we click on button then “div” will be  hide.

 


fadeOut() - Using the speed parameter

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

 OR

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

 

fadeOut() - Using the callback parameter

<script type="text/javascript">   
$(document).ready(function () {       
 $("button").click(function () {
$("#div1").fadeOut(3000, function () {
     $(this).html("fadeIn() method isfinished!");
});        });    });
 </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