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 wa开发者_Go百科nt 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!
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.
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.
Use jQuery...
$('#someId').fadeOut();
And here's the API Reference in case you need to modify anything about the fadeOut effect:
.fadeOut() - jQuery API
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
How about resorting to jquery? All you'll need is a '.fadeOut()' and you're good to go
Have a look at the jQuery fadeOut function.
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).
精彩评论