Hello. I have a small rotation script, which rotates the content of different divs, fading from one to the next.

Seems to work fine in Safari, FF, IE7, but breaks in IE6. The fade on the div's background image doesn't work - either in or out. It does fade the text in the h2 tag.

Can anyone provide any tips for getting it to work in the evil IE6?

HTML Code:
<script type="text/javascript">
n=1;
bannercount = 3;

function rotate() {
	var oldbanner = Ext.get('banner' + n);
	n++;
	if(n > bannercount) { n = 1; }
	var newbanner = Ext.get('banner' + n);
	
	oldbanner.fadeOut( { easing: 'easeOut', afterCls:'banner', useDisplay: true, duration: 2 } );	
	newbanner.fadeIn( { easing: 'easeOut', duration: 2 } );
}

Ext.onReady(function() {
	setInterval('rotate()', 4000);
});

</script>

<div id="banners">
	<div id="banner1" class="banner1" style="background: URL('/img/image1.jpg') no-repeat top left;"><h2>Text one</h2></div>
	<div id="banner2" class="banner" style="background: URL('/img/image2.jpg') no-repeat top left;"><h2>Text two</h2></div>
	<div id="banner3" class="banner" style="background: URL('/img/image3.jpg') no-repeat top left;"><h2>Text three</h2></div>
</div>