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

Sposób nr 1 odpada bo nie mam zielonego pojęcia na temat php i nie chciałbym wsadzać na stronę czegoś czego nie rozumiem. Poza tym wolałbym utrzymac całość w konwencji html/css/js.

Sposób numer dwa jest dla mnie zrozumiały tylko pojawiają się dwa pytania.
Czy to nie obciąży zbyt strony? Kod na każdy przycisk wydłuży mi się o ładne kilka linijek.
Poza tym, linkiem w moim przypadku jest cały div. Co po kliknięciu na niego dostaje klasę active? Próbowałem różnych kombinacji w arkuszu aby to sprawdzić i nie udało mi się nic dowiedzieć. Jeśli wiedziałbym co dostaje klasę active, mógłbym z poziomu css dopisać, że elementy klasy active maja background-position: -640px

Dzieki i pozdrawiam!

emilg

Ten post edytował emilgojny 21.07.2011, 10:05:37