Fading для слайдера
 

В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);
}

Здравствуйте!
Автор, нашел решение? Или добрые люди подскажите как?
Я пока добился вот такого вот результата: http://demo.twmail.info/ . Но мне нужен вот такой: http://demo.joomlaworks.gr/ , кажется как раз это автор темы и хотел.

AlexZd, где там результат?

В смысле результат?
http://demo.twmail.info/ - на этом сайте слайдер вверху, его трудно не заметить, это то что я пока сделал, понажимайте на стрелки.
http://demo.joomlaworks.gr/ - здесь тоже слайдер вверху под надписью "Frontpage SlideShow (by JoomlaWorks)" в правое его части типа вкладки, понажимайте на них.

AlexZd,
тогда, как автор работы, Вы должны прекрасно знать вот эту страничку и знать все настройки для работы слайдера, которые Вам помогут

Я не говорил что я автор этого слайдера :). Видите там происходит сдвиг влево, как вы можете заметить я переделал его на исчезание, но мне нужен не совсем эффект исчезания и появления нового слайда, а перетекание. В настройках слайдера нету такого вида. Вот и вопрос как сделать именно перетекание как здесь http://demo.joomlaworks.gr/