Would like new content to fade in on an AJAX call

[gausie]

If I'm updating the innerHTML of a div from an AJAX call, how can I make the new content fade in rather than just appear?

 

And I need to do this so that it is cross-browser compatable

 

gausie

[nogray]

If you check the NoGray JavaScript library, you'll find a whole set of animation options. Also there is a set opacity function.

 

Or you can do use the set opacity as a stand alone with a setTimeout to hide and show the divs.

// pass the object to the function using
// something like document.getElementById()

// IE might need the object to have absolut positioning
function setOpacity(obj, val){
// checking if the browser is Opera
var is_Opera = (window.navigator.userAgent.search("Opera") != -1);

// checking if the browser is IE
var is_IE = ((window.navigator.userAgent.search("MSIE") != -1) && !is_Opera);

if (is_IE){
	obj.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(Opacity="+val+")";
}
else {
	obj.style.MozOpacity = val;
}
obj.style.opacity = val;
}

 

The val should be between 0 to 1