jQuery fadeIn()

jQuery fadeIn() method gradually changes the opacity of selected elements, from hidden to visible.In other words jQuery fadeIn() method animates the opacity of the selected elements.

Syntax

$(selector).fadeIn( [duration ] [, easing ] [, complete ] )

Specification

  • duration:It specifies the duration of the effect.It can take the following values: "slow", "fast", or milliseconds(default:400).
  • easing:It specifies which easing function to use for the transition.It can take the following values:"linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeInOutCubic".
  • complete:A function to call once the animation is complete.

Examples

Animate hidden div to fade in.

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>jQuery fadeIn() Example </title>
</head>
<body>
<button>Click Me</button>
<div style="background:#98bf21;height:100px;width:100px;display:none;">
Use of jQuery fadeIn() 
</div>
</body>
</html>
Javascript
$(document).ready(function(){
  $("button").click(function(){
   $("div").fadeIn("slow");
  });
});