jQuery fadeIn() Method

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


This syntax represent to the fadeIn method

$(selector).fadeIn( duration, easing, callback );
Parameter Type Description
duration Number
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.


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

<!DOCTYPE html>
  <title>jQuery fadeIn() and fadeOut() methods</title>
  <script src="jquery-latest.min.js"></script>
    $(document).ready(function() {
  <style type="text/css"> 
    div {
      background: #FC5E5E;
      font-family: arial;
      padding: 10px;
  <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>

Run it...   »