jquery cross fade div onclick

arkadaşlar şöyle bir şey yapmaya / bulmaya çalışıyorum :

üstte büyük bir div (position:absolute'le sabitlenmiş)
allta küçük divler. küçük divlere tıklayınca üstteki div'in değişmesini ancak cross fade denilen efekt'le biri giderken diğerinin gelmesini istiyorum.

sadece iki div olsa jquery fadetoggle'la yapmışlığım var. ancak birden çok div olunca fadein + fadeout kullanmak. thumbnail olan div'den referans alıp büyük div'i değiştirmek gibi çözemediğim şeyler ortaya çıkıyor.

yapısı pek de hoş olmayan bulduğum ve düzenlediğim bir kodla şu noktaya gelebildim. (tabi button yerine div olmasını isterdim ama fadeout'u tüm divlere vermiş vb.)

http://3dfiction.com/test2.htm

ya da fade efektsiz çalışan temiz bir kod buldum. buna nasıl fade eklenir.

http://jsfiddle.net/Qhdaz/2/

yardımcı olursanız çok sevinirim

jQuery pek sevmiyorum ama css ile şöyle bir şey yaptım belki işine yarar: http://jsfiddle.net/fqdgvfed/1/

teşekkür ederim. jquery olup olmaması dert değil. senin yaptığını div'e çevirmeye çalıştım yapamadım. resim değilde div'lerin cross fade olmasını istiyorum. şöyleki

bir tane açılışta gözüken div'im olduğunu düşünün (intro dediğim) 3 tane de gizli div'imin olduğunu düşünün. ilgili linklere basınca ilgili olan div crossfade gelsin. senin resimli örnekteki gibi

<div id="div0" style="position:absolute; width:100px; height:100px; background-color:green; display:block">intro</div>

<div id="div1" style="position:absolute; width:100px; height:100px; background-color:blue; display:none">content 1</div>

<div id="div2" style="position:absolute; width:100px; height:100px; background-color:yellow; display:none">content 2</div>

<div id="div3" style="position:absolute; width:100px; height:100px; background-color:red; display:none">content 3</div>

<h1 onclick="activate1">link 1</h1>
<h1 onclick="activate2">link 2</h1>
<h1 onclick="activate3">link 3</h1>

kodu şöle düzenleyince div'ede uygulayabildim. biraz eksiklerim var ama teşekkürler çok.

<script>
$("#container div").addClass("faded");
$("#container div:first-child").addClass("not-faded");

$(".thumbnails img:first-child").addClass("selected");
$(function(){
$(".thumbnails img").click(function(e){
var index = $(this).index();
var obj=$("#container div").eq(index);
obj.addClass("not-faded");
obj.siblings().removeClass("not-faded");
obj.siblings().addClass("faded");
console.log(e);
$(".thumbnails img").removeClass("selected");
e.currentTarget.className="selected";
});
});
</script>

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 12:08:26 -->-> Daha önceki mesaj 11:10:40 --

arkadaşlar, küçük bir yardımınızla düşündüğüm şeyin en temizi şu olacak. bu haliyle çalışıyor fadein fadeout olmadan

<div id="pages" style="position:absolute; top:20px; width:100px; height:100px; background-color:rgb(0,0,200)">
<div id="1">1111</div>
<div id="2">2222</div>
<div id="3">3333</div>
</div>

<div id="buttons" style="position:absolute; bottom:20px">
<a href="#" id="1">Div 1</a>
<a href="#" id="2">Div 2</a>
<a href="#" id="3">Div 3</a>
</div>

<script>
$("#buttons a").click(function() {
var id = $(this).attr("id");
$("#pages div").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#pages div:not(#1)").css("display", "none");
</script>

şu script içinde display none, display block yerine jquery fadeout, fadein, yada css opacity animate gibi bir çözüm olursa çok iyi olur. şimdiden teşekkürler