[lastic]

Вcем привет. Делал скрипт столкнулся с проблемой необходимо чтобы картинки не сменялись друг другом а плавно перетекали по таймеру одна в другую т.е fadein fadeout, но сделать пока никак не получается, получается что сначала одна потом другая....

подскажите как быть плиз.

вот штмл

<div id="news_banner">
<div id="banners">
		            <a style="display: inline;" href="/"><img src="news_ban_1.jpg"></a>
		            <a style="display: none;" href=""><img src="news_ban_2.jpg"></a>
		            <a style="display: none;" href=""><img src="news_ban_3.jpg" width="701" height="279"></a>
		        </div>

                <ul id="banner_thumbs">
		            
<li class="selected" onmouseover="showBanner2(0)" onmouseout="showBanner(0)" id="banner_thumb_0"><a href=""></a></li>
		            
<li class="" onmouseover="showBanner2(1)" onmouseout="showBanner(1)" id="banner_thumb_1"><a href=""></a></li>
		            
<li class="" onmouseover="showBanner2(2)" onmouseout="showBanner(2)" id="banner_thumb_2"><a href=""></a></li>
		      
		        </ul>
</div>

var currentBanner = 0;
var rotateInterval = setInterval("nextBanner()", 3000);


function showBanner(num) {
	if (currentBanner == num) {
		clearInterval(rotateInterval);
		rotateInterval = setInterval("nextBanner()", 3000);	
		return;
	}
	$('#banners a').fadeOut(1000);
	$('#banner_thumbs li').removeClass('selected');
	currentBanner = num;

	$('#banners a:eq(' + (currentBanner) + ')').fadeIn(500);
	$('#banner_thumbs li:eq(' + (currentBanner) + ')').addClass('selected');
	clearInterval(rotateInterval);
	rotateInterval = setInterval("nextBanner()", 3000);
}

function nextBanner() {
	var nextNum = currentBanner == 2 ? 0 : currentBanner + 1;
	showBanner(nextNum);
}


function showBanner2(num) {
	if (currentBanner == num) {
		clearInterval(rotateInterval);
		rotateInterval = setInterval("nextBanner()", 10000);	
		return;
	}
	$('#banners a').hide();
	$('#banner_thumbs li').removeClass('selected');
	currentBanner = num;

	$('#banners a:eq(' + (currentBanner) + ')').fadeIn();
	$('#banner_thumbs li:eq(' + (currentBanner) + ')').addClass('selected');
	clearInterval(rotateInterval);
	rotateInterval = setInterval("nextBanner()", 10000);
}