JQuery - nie działa

Witam
Chciałbym zrobić w JQuery tak aby po najechaniu na przycisk został on podkreślony (border-bottom) na jakiś kolor.
Tak aby po najechaniu pojawiła się kreska pod napisem. Oczywiście animowane.
A po zjechaniu myszy ma ona powoli zniknąć.
To co mam, i nie działa, jest w załączniku.

1. Nie wrzucaj zipów, tylko wklej kod na forum, a najlepiej wrzuć na jsbin.com
2. Nie pisz stron w notatniku!
3. ... Bo masz błąd składni, źle zamknięte nawiasy - IDE by Ci wskazało błąd zanim byś zdążył pomyśleć o zakładaniu wątku na forum.
4. ... A wiem to, bo sprawdzam konsolę błędów (Google: konsola błędów js nazwa_przeglądarki), a Ty nie

Poprawiłęm.... ale i tak animacja nie działa.

<script>
		$(document).ready(function(){
    		$(".button").mouseenter(function(){
				$(this).css({borderBottomColor:"transparent",borderBottomStyle:"solid",borderTopWidth:"1px"}).animate({borderBottomColor:'#70c989'}, 'slow', 'linear');
    			});
    		$(".button").mouseleave(function(){
        			$(this).css({borderBottomColor:"#70c989",borderBottomStyle:"solid", borderBottomWidth:"1px"}).animate({borderBottomColor:'transparent'}, 'slow', 'linear');
				});
			$(".button").click(function(){
    			$(".button").animate({
        		left: '250px',
        		opacity: '0.5',
        		height: '150px',
        		width: '150px'
    			});
			});
		});
	</script>

Animowanie kolorów zdaje się jest dostępne dopiero po załadowaniu jQuery UI.

A po co w ogóle robisz to w JS, skoro łatwiej i płynniej będzie to działać zrobione w CSS?

A jak włączyć t to w Jquery?

Musisz załadować bibliotekę jQuery UI, ale tak na szybko i tak to nie działało, a ponieważ nie lubię zagłębiać się w tajniki wiedzy sprzed lat i generalnie "robienia nie tak jak należy" to nawet nie bawię się w debugowanie tego. Zrób w CSS, a jeżeli nie chcesz to podaj rozsądny powód - dlaczego nie?

Już robiłem to w CSS (nawet w moim zipie sa tego ślady) ale nie za bardzo wiedziałem jak zrobić by zjechaniu podkreślenie było przezroczyste i jakoś tak namieszałem, że działało ale zawsze po załadowaniu strony animacja się wykonywała, za każdym odświeżeniem...

http://jsbin.com/larumarawe/edit?html,css,output przecież to raptem kilka linijek ...

transition? pierwsze słyszę...

To może pierwsze poczytaj, a potem rób?

Coś w tym jest...
Dobra, to Jquery nie potrzebne, przynajmniej na razie, zrobię to w CSS a potem się zobaczy.

Dzięki za pomoc.