CODEWITHSUNDEEP
javascripthtmlcss
bragboy
bragboy

Reputation: 35542

Need to have fade out effect in Javascript

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!

Upvotes: 2

Views: 1570

Answers (7)

awesomo
awesomo

Reputation: 8816

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

Upvotes: 0

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 3

strager
strager

Reputation: 90012

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.

Upvotes: 5

Justin Ethier
Justin Ethier

Reputation: 134167

Have a look at the jQuery fadeOut function.

Upvotes: 0

Jonn
Jonn

Reputation: 4661

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

Upvotes: 0

MyGGaN
MyGGaN

Reputation: 1806

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

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245399

Use jQuery...

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

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

.fadeOut() - jQuery API

Upvotes: 1

Related Questions