CODEWITHSUNDEEP
javascriptjquery
user1065673
user1065673

Reputation: 93

Need to add a fade out effect to a hiding box with javascript/jquery

I have a notification div which dissapears after 5 seconds. How to add a fade out effect that the disappearing would be smooth and nice.

My code now: 

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

Upvotes: 4

Views: 312

Answers (5)

Niels
Niels

Reputation: 49919

This function will start counting after document ready. Can be added anywhere you want. As long as its between <script></script> tags or in a differne 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/

Upvotes: 3

Emil Lundberg
Emil Lundberg

Reputation: 7379

With jQuery, you could try:

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

More reading: http://jqueryui.com/demos/effect/

Upvotes: 0

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102398

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

You'd add this in a JavaScript block, this way:

<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>

Upvotes: 4

topherg
topherg

Reputation: 4293

if you don't want to use jQuery, you could use jsTween (have a search for it on google). I use it for animation on sites, and it is really good, and (in some cases) considerably faster than its jQuery fade counterpart.

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

that will fade out the object over 5 seconds

Upvotes: 0

Arindam
Arindam

Reputation: 998

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

Upvotes: -1

Related Questions