[CSS][jQuery] Animowane zakładki

<div id="taby">
<!--tutaj definiujemy linki do zakładek-->
    <a class="tab_link tab_link_wybrany" title="#tab1" href="#">Zakładka 1</a>
    <a class="tab_link" title="#tab2" href="#">Zakładka 2</a>
    <a class="tab_link" title="#tab3" href="#">Podsumowanie</a> 
 
<!--trzeba wyczyścić float, inaczej się wszystko może rozjechać-->  
	<div class="clear">
    </div>
 
<!--treść zakładek; należy zwrócić uwagę na nazewnictwo (id)-->
	<div id="tab1" class="tab_text tab_wybrany">
        Cras id lorem. Cras turpis a leo. Integer lorem pretium quis, dui. Suspendisse dapibus in, odio. In hac habitasse platea dictumst. Maecenas fermentum odio. Nunc ut turpis. Nullam magna et ultrices et, fermentum ultrices condimentum ultricies, hendrerit libero. Integer egestas, nulla massa, dictum convallis. Cras sed massa volutpat metus. Maecenas blandit sed, ultrices eget, sollicitudin vitae, commodo est diam, venenatis leo ultrices adipiscing elit. Mauris aliquet elit, sit amet neque. Pellentesque et magnis dis parturient montes, nascetur ridiculus mus. Praesent feugiat. Cum sociis natoque penatibus et malesuada fames ac lacus. Pellentesque fermentum imperdiet orci magna blandit non, fringilla non, vehicula.
    </div>    
	<div id="tab2" class="tab_text">
        Giedrojć z czego wybrać u jednej dwórórki. Wyczha! poszli, a nic - mój kus cap ! - kanonada. Ruskie przysłowie: z Podkomorzyną obok Korsak, towarzysz jego nie mogą. Słońce ostatnich kresów nieba spadała w bitwie, gdzie nie szpieg, a nic - wprawdzie chartów, bo tak były pod Twoją opiek ofiarowany, martwą podniosłem powiek i aby w grób się kiedyś demokratą. Bo nie nalewa szklanki, i musiał pochodzić od chmielu tyki w oczy podniósł, i tam pewnie na jutro sam ku studni, której lat blisko drzwi poglądał jakby wstęgą, miedz zieloną, na piersiach, przydawając zasłony sukience. Włos w pułku gadano, jak.
    </div>    
	<div id="tab3" class="tab_text">
        I to by było na tyle. Prawda, że proste?
    </div>    
</div>

.tab_link {
    float: left; /*ważne aby to dodać*/
    border: 1px solid black;
    background: #333333;
    padding: 5px;
    margin-right: 10px ;
    color: #ffffff;
    text-decoration: none;
    font-variant: small-caps;
}
.tab_link_wybrany { 
	background-color: #b30000; 
}
.tab_text {
    display: none;
    border: 1px solid black;
    padding: 5px;
    color: #000000;
}
#taby {
	width: 500px;
	margin: 50px auto;
}
.clear {
	clear: both;
}

$(document).ready(function(){
/*Przez to, że wszystkie zakładki są ukryte, to wyświetlamy je nadając im klasę .tab_wybrany korzystając z efektu fadeIn(). Jeśli chcesz korzystać z zakładek bez efektu animacji, to zamiast fadeIn() wpisz show()*/
        $(".tab_wybrany").fadeIn();
//kiedy link do zakładki zostaje wciśnięty...
        $(".tab_link").live("click", function(event){
/*...blokuje domyślne zachowanie, jakim byłaby próba wczytywania pliku zdefiniowanego w href...*/
            event.preventDefault();
/* ...usuwanie klasy tab_link_wybrany z aktywnego obecnie linku... */
            $(".tab_link_wybrany").removeClass("tab_link_wybrany");
/* ...dodanie tej klasy do wybranego linku */
            $(this).addClass("tab_link_wybrany");
/*...pobierz dane z atrybutu title zdefiniowanego w linku (który wskazuje na id wybranej zakładki z treścią)*/
            var container_id = $(this).attr("title");
//...animuj zakładkę zmieniając jej wysokość i przezroczystość
            $(".tab_wybrany").animate({                 
                height : "toggle" , opacity : "toggle" 
//...a gdy animacja się skończy...
            },function(){
//...usuń klasę tab_wybrany z obecnej aktywnej zakładki...
                $(this).removeClass("tab_wybrany");
//...i dodaj tą klasę do zakładki do której prowadził link...
                $(container_id).addClass("tab_wybrany");
//...wykonaj ponownie animację...
                $(".tab_wybrany").animate({                   
                    height : "toggle" , opacity : "toggle"                    
                });
            });            
        });
    });

<script type="text/javascript" src="jquery.js"></script>