.fadeIn()

In this chapter you will learn:

Syntax and Description for .fadeIn()
Fade in callback
Fast fade in
Fade in controlled by milliseconds
Slow fade in
Header fade in and fade out
Cascade fade out animation

Syntax and Description

$(selector).fadeIn([speed,] [easing,] [callback]);

displays the matched elements by fading them to opaque.

duration (optional)
A string or number determining how long the animation will run
callback (optional)
A function to call once the animation is complete

Its return value is the jQuery object, for chaining purposes.

The .fadeIn() method animates the opacity of the matched elements. Durations are given in milliseconds; higher values indicate slower animations. The 'fast' and 'slow' strings can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

If supplied, the callback is fired once the animation is complete.

Fade in callback

<html><!--from   ja  va 2 s. c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("div").fadeIn(1000, function () {
                    alert("done");
                  });
        });
    </script>
  </head>
  <body>
    <body>
          <div style="display:none;">Click me</div>
    </body>
</html>

Click to view the demo

Fast fade in

<html><!--from   j  a  v  a  2  s. com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("div").fadeIn("fast");
        });
    </script>
  </head>
  <body>
    <body>
          <div style="display:none;">Click me</div>
    </body>
</html>

Click to view the demo

Fade in controlled by milliseconds

<html><!--from   j  a v  a2 s  .  c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("div").fadeIn(2000);
        });
    </script>
  </head>
  <body>
    <body>
          <div style="display:none;">Click me</div>
    </body>
</html>

Click to view the demo

Slow fade in

<html><!--   ja v a 2s . c om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("div").fadeIn("slow");
        });
    </script>
  </head>
  <body>
    <body>
          <div style="display:none;">Click me</div>
    </body>
</html>

Click to view the demo

Header fade in and fade out

<html><!--   j  a v  a2s.  c  o m-->
<head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("h1").css("opacity", 1).fadeIn(30).fadeOut(1000);
        });
    </script>
</head>
  <body>
       <div><h1>java2s.com</h1></div>
  </body>
</html>

Click to view the demo

Cascade fade out animation

<html><!--  j a va 2s. c o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
        });
    </script>
  </head>
  <body>
    <div style="" id="info">an animated info message</div>
  </body>
</html>

.fadeIn()

Syntax and Description

Fade in callback

Fast fade in

Fade in controlled by milliseconds

Slow fade in

Header fade in and fade out

Cascade fade out animation

Next chapter...

.animate()

.css() does animation

.clearQueue()

.delay()

.dequeue()

.extend()

.fadeIn()

.fadeOut()

.fadeTo()

.hide()

.queue()

.show()

.slideDown()

.slideToggle()

.slideUp()

.stop()

.toggle()