Learn jQuery

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");
  });
});