[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 korzystasz z jquery to czemu animację wykonujesz poprzez SetTimeout a nie jquery.animate?

Pozdrawiam

[emilgojny]

Nie używam .animate bo nie jestem jakims fachowcem jezeli chodzi o jQuery i JS, zadużo bym sie musiał namęczyć żeby otrzymać zamierzony efekt. Mam po prostu 5 klatek animacji w spricie i wyświetlam je po kolei Sam efekt animacji jest dla mnie bez zarzutów. Problem mam tylko z tym co sie dzieje po kliknięciu. Nie wydaje mi się żeby .animate to rozwiązał.

Dzięki za jakikolwiek odzew lecz czekam na dalsze odpowiedzi

[askone]

Masz to dostępne gdzieś online?

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

Pozdrawiam!

[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

[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

[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

[emilgojny]

No rzeczywiście, to chyba najprostsze rozwiązanie co prawda po późniejszym kliknięciu na inny link tamten wraca do stanu spoczynku bez animacji ale nie będzie to aż tak zauważalne.

Dzieki i pozdrawiam

[erix]

Ale to rozwiązanie jest niesemantyczne. Po co mieszać styl z HTML w tym przypadku? Jedyny sens, to gdyby było ustalane przez użyszkodnika tło.

Dużo lepszym rozwiązaniem jest tu użycie data:

1. najeżdżasz -> ustawiasz atrybut dla elementu
2. zjeżdżasz -> sprawdzasz, czy atrybut jest ustalony, jeśli jest -> animacja i czyścisz flagę. Jeśli nie jest - nie robisz nic

Bez kombinowania. [;

[emilgojny]

A mógłbym prosić o jakiś dokładniejszy opis co zrobić z tym .data i gdzie to umieścić?

Dzieki i pozdrawiam

emilg

[erix]

Czego nie rozumiesz?