Need to add fade effect to hidden area with javascript / jquery

Question

I have a div notification that disappears after 5 seconds. How to add a fade effect that fade out will be smooth and enjoyable.

My code is:

<script type="text/javascript"> setTimeout(function(){ document.getElementById('notification').style.display = 'none'; }, 5000); //5secs </script> 

Answer 1

This function will start counting after the document is ready. You can add anywhere. While it is between the <script></script> or in a separate JS file.

 $(function(){ $("#notification").delay(5000).fadeOut(2000); // the 2000 is the time the fadeOut will take to disapear. }); 

jsfidlle showing this: http://jsfiddle.net/jGtTP/

Answer 2

 $('#notification').delay(5000).fadeOut(); 

You would add this to your JavaScript block like this:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { $('#notification').delay(5000).fadeOut(); } </script> 

Answer 3

With jQuery you can try:

 $("#notification").effect("fade"); 

Additional information: http://jqueryui.com/demos/effect/

Answer 4

If you do not want to use jQuery, you can use jsTween (search it in google). I use it for animation on sites, and this is really good, and (in some cases) significantly faster than its jQuery counterpart.

 opacityTween = new OpacityTween(document.getElementById('notification'),Tween.strongEaseInOut, 100, 0, 5); opacityTween.start() 

which obscures the subject for 5 seconds

Answer 5

 setTimeout(function() { $('#notification').attr('style', 'display: none;'); }), 5000);