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

Skoro nie używasz php to rozumiem, iż posiadasz osobne pliki html do każdego elementu menu. Jeśli tak to wystarczy wpisać na stałe w kod html pozycji background. Przykładowo dla strony oferta.html

[HTML] pobierz, plaintext 
<a href="oferta.html">
 <div class="b" style="background-position: -640px 0px; ">
  Oferta
 </div>
</a>
[HTML] pobierz, plaintext 

Pozdrawiam

Ten post edytował askone 21.07.2011, 10:47:02