[JavaScript][jQuery] Problem z .hover po kliknięcu Opcje

[emilgojny]

Witam wszystkich,

Mam problem z funkcją .hover odpowiedzialną za animowanie przycisku na stonie. Załącze najpierw kod jQuery:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
$('.button').hover(function(){
setTimeout(function(){$('.button').css('backgroundPosition','-'+160+'px -'+0+'px');}, 40);
setTimeout(function(){$('.button').css('backgroundPosition','-'+320+'px -'+0+'px');}, 80);
setTimeout(function(){$('.button').css('backgroundPosition','-'+480+'px -'+0+'px');}, 120);
setTimeout(function(){$('.button').css('backgroundPosition','-'+640+'px -'+0+'px');}, 160);
},
function(){
setTimeout(function(){$('.button').css('backgroundPosition','-'+640+'px -'+0+'px');}, 40);
setTimeout(function(){$('.button').css('backgroundPosition','-'+480+'px -'+0+'px');}, 80);
setTimeout(function(){$('.button').css('backgroundPosition','-'+320+'px -'+0+'px');}, 120);
setTimeout(function(){$('.button').css('backgroundPosition','-'+160+'px -'+0+'px');}, 160);
setTimeout(function(){$('.button').css('backgroundPosition','-'+0+'px -'+0+'px');}, 200);
});
[JAVASCRIPT] pobierz, plaintext 

Jak widać, funkcja w prosty sposób animuje przycisk podczas .mouseenter a podczas .mouseleave wykonuje tę samą animację od końca (przycisk sie rozsuwa i zsuwa). Wszystko działa poprawnie dopuki nie kliknę na przycisk. Po kliknięciu zmienia się strona (przycisk zostaje w tym samym miejscu i ma te same właściwości) lecz przycisk bez animacji wraca do stanu spoczynku, a kiedy z niego "zjadę" włącza się animacja z .mouseleave (która jest tak jakby urwana bo powinna następować dopiero po zaanimowaniu .mouseenter). Chciałbym, żeby po kliknięciu przycisk nie wracał do stanu spoczynku tylko zostawał rozsunięty. Na wszelki wypadek załaczam także fragment html i css.

[HTML] pobierz, plaintext 
<a href="index.html"><div class="button">O nas</div></a>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.button {
float: left;
overflow: hidden;
background: transparent url("../grafika/animacja.png") no-repeat;
width: 125px;
height: 34px;	
}
[CSS] pobierz, plaintext 

Z góry dzieki za pomoc!
Pozdrawiam

emilg

Powód edycji: [thek]: Na przyszłość używaj własciwego bbcode!

[emilgojny]

Dzieki za chęć pomocy.

Wrzuciłem na republikę. Link

Proszę się nie sugerować wyglądem ani treścią. Postanowiłem na początku zająć się techniczną częścią strony a treść i grafikę zrobić na końcu. Pokopiowałem więc losowe treści z wikipedii i zrobiłem w 5 minut byle jakie grafiki w gimpie, żebym tylko miał na czym pracować (IMG:style_emoticons/default/wink.gif)

Pozdrawiam!