InnerHTML fade on request?

[matfish]

Hi, I'm not great with Javascript/Ajax but I'v been using the below code in different places for a while now and it seems to work without any issues:

 

function showList(nodeID) {
	var xmlHttpReq = false;
	var self = this;
	var qstr = 'nodeID=' + (nodeID);

	document.getElementById('item_' + nodeID).innerHTML = "  <img src='/images/ajax_spinner_grey.gif' alt='Please wait.' border='0'> Loading...";


	if (window.XMLHttpRequest) {
		self.xmlHttpReq = new XMLHttpRequest();
	}else if (window.ActiveXObject) {
		self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
	}

	self.xmlHttpReq.open('POST', 'item_list.php', true);
	self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	self.xmlHttpReq.onreadystatechange = function() {
		if (self.xmlHttpReq.readyState == 4) {
			updatepage(self.xmlHttpReq.responseText, 'item_' + nodeID);
		}
	}


	self.xmlHttpReq.send(qstr);

}



function updatepage(str, div){
document.getElementById(div).innerHTML = str;
}

 

But I'm trying to fade the content which is updated in the .innerHTML so it looks a little "Flashy". Anyone have any ideas or point me in the right direction?

 

Many thanks

 

 

[rhodesa]

for this kind of AJAX and fading, I would look into jQuery. it's lightweight and will do everything you want in a lot less code.

 

Here is the documentation on the fade out: http://docs.jquery.com/Effects/fadeOut#speedcallback

[matfish]

Many thanks, I will look into this.

 

Thanks again