[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!

[askone]

Istnieją 2 rozwiązania Twego problemu:

1. W skrypcie php wykrywasz, który element menu ma być aktywnym i dodajesz do niego odpowiednią definicję pozycji background w atrybucie style
2. Zapisujesz każdy krok animacji jako osobną klasę w pliku css. Wtedy w poszczególnych klatkach animacji nie modyfikujesz background-position tylko nadajesz odpowiednia klasę. Ponadto klasa, która będzie miała background-position: -640px, 0 przypisujesz do aktywnego elementu menu.

Mam nadzieję, iż nie namieszałem - jak będziesz miał problem ze zrozumieniem idei to postaram się wrzucić jakiś kod

Pozdrawiam