Need to have fade out effect in Javascript

Question

Hi,

I am doing an Ajax call and on response I would like to hide a div. Right now, I am able to do it successfully, but that is kind of quick. I want some fade out effect on it. How to do it in one single shot?

Here is my current code.

var someDiv = document.getElementById(someId);
someDiv.style.display="none";

Thank you very much in advance!

Answer 1

Use jQuery...

$('#someId').fadeOut();

And here's the API Reference in case you need to modify anything about the fadeOut effect:

.fadeOut() - jQuery API

Answer 2

I could recommend using a framework (I prefer jQuery). It will also handle cross platform support.

$('#div-id-here').fadeOut('slow');

For more info consult their documentation: jQuery fadeOut

Answer 3

How about resorting to jquery? All you'll need is a '.fadeOut()' and you're good to go

Answer 4

Have a look at the jQuery fadeOut function.

Answer 5

Nice to see all five answers so far refer to jQuery.

There are several articles for creating a fade effect using vanilla Javascript, though be weary of the Javascript most people publish online.

Answer 6

If you want to forgo jQuery or frameworks, this is a pattern you can use:

function fadeThisElement(elm, interval) {
  for (var i=10; i>0; i--) {
    var opacity = i/10;
    setTimeout( function(opacity) {
      elm.setStyle("-moz-opacity",opacity);
      elm.setStyle("opacity",opacity);
      elm.setStyle("filter","alpha(opacity=" + (opacity*100).toString() );
      //set your alpha values for the various browsers
    }, interval;
  }
}

Give the interval in milliseconds. I suggest 10 for a 10-step fade.

Answer 7

I'll throw in the MooTools version for good measure:

$('myid').fade(opacity)

where opacity is a value in the interval [0,1]. You can also call it as:

$('myid').fade('out')

There are more options available. MooTools is 65kb in size (YUI compressed).