jQuery fadeIn() Method

jQuery fadeIn() method perform fades in effect on the selected elements from hidden to visible.

Syntax

This syntax represent to the fadeIn method

$(selector).fadeIn( duration, easing, callback );
Parameter Type Description
duration Number
String		 Optional. Accept string or number that determining how long fading effect will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the fadeIn is complete.

Example

Here, in this example show fadeIn and fadOut effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery fadeIn() and fadeOut() methods</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#fadein").click(function(){
        $("div").fadeIn(3000);
      });
      $("#fadeout").click(function(){
        $("div").fadeOut(3000);
      });
    });
  </script>
  <style type="text/css"> 
    div {
      background: #FC5E5E;
      font-family: arial;
      padding: 10px;
    }
  </style>
</head>
<body>
  <button id="fadein">Fade In (3 Seconds)</button>
  <button id="fadeout">Fade Out (3 Seconds)</button>
  <br /><br />
  <div>This element represent fade in and fade out effect.</div>
</body> 
</html>

Run it...   »