Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Problem z metodą animacji animate()
Forum PHP.pl > Forum > Przedszkole
peja1990
Witam,
mam pewien problem z animacją.
Pozwolę sobie od razu przedstawić kod prościutkiej funkcji:
  1. function showOptions(e = "div", status = "expand" height = 100) {
  2. // Ustalam wysokość diva
  3. if(!height || height == 0) {
  4. return $(e).children('.options').height();
  5. }
  6. if(status == "expand") {
  7. $(e).children('.options').css('height', '0px').show().animate({
  8. height : '+=' + height // No i tutaj cały problem !
  9. });
  10. }
  11. }


Problem polega na tym, że gdy kilkukrotnie wykonam szybko funkcję (mouseover / mouseout) to wysokość czyli zmienna 'height' zaczyna się powiększać czego nie chcę i w tym cały mój problem...
Wiadomo, że mój problem rozwiązałaby zmiana metody animacji np. na show() ale zależy mi by zostać przy zastosowanej metodzie dlatego proszę Was o pomoc.
Macie jakieś pomysły ?
Z góry bardzo dziękuję.

---
Serdecznie pozdrawiam
Niktoś
No i widzisz nie lepiej tak od razu,a nie nie chce mi się?
Błędy które zauważyłem:
[JAVASCRIPT] pobierz, plaintext
  1. function showOptions(e = "div", status = "expand" height = 100) {
[JAVASCRIPT] pobierz, plaintext
-chyba trzy parametry powinny być,brak przecinka?Powinno być:
[JAVASCRIPT] pobierz, plaintext
  1. function showOptions(e = "div", status = "expand" ,height = 100) {
[JAVASCRIPT] pobierz, plaintext


if(!height || height == 0) {-tutaj nie za bardzo wiem czy !height w js jest poprawne, czy nie powinno być:
[JAVASCRIPT] pobierz, plaintext
  1. if((height=="undefined") || (height == 0)) {
[JAVASCRIPT] pobierz, plaintext
peja1990
Cytat(Niktoś @ 27.04.2012, 22:04:40 ) *
No i widzisz nie lepiej tak od razu,a nie nie chce mi się?
Błędy które zauważyłem:
[JAVASCRIPT] pobierz, plaintext
  1. function showOptions(e = "div", status = "expand" height = 100) {
[JAVASCRIPT] pobierz, plaintext
-chyba trzy parametry powinny być,brak przecinka?Powinno być:
[JAVASCRIPT] pobierz, plaintext
  1. function showOptions(e = "div", status = "expand" ,height = 100) {
[JAVASCRIPT] pobierz, plaintext


if(!height || height == 0) {-tutaj nie zabardzo wiem czy w !height w js jest poprawne czy nie powinno być:
[JAVASCRIPT] pobierz, plaintext
  1. if((height=="undefined") || (height == 0)) {
[JAVASCRIPT] pobierz, plaintext


No widzisz wink.gif
Okrajałem kod i dlatego też nie zauważyłem braku przecinka ale zobacz sobie na działanie tego prostego kodu:
http://jsfiddle.net/fvzFg/3/

Najedź i zjedź z bloczku kilka razy w szybkim tempie i zobaczysz jaki jest efekt.
Niktoś
Odpowiedź prosta ,zobacz:
http://jsfiddle.net/fvzFg/4/
Możesz regulować tempo w animate ,jak chcesz.
peja1990
Cytat(Niktoś @ 27.04.2012, 22:12:47 ) *
Odpowiedź prosta ,zobacz:
http://jsfiddle.net/fvzFg/4/
Możesz regulować tempo w animate ,jak chcesz.


Zmniejszenie czasu trwania animacji biggrin.gif
No tak, a gdybym chciał mieć np. duration 5 sek ? biggrin.gif
Co byś na to poradził ? biggrin.gif


-----------
Daj sobie trochę cierpliwości i przekonaj się, że nie masz racji ;P
http://jsfiddle.net/fvzFg/4/
-----------
500 - w zupełności wystarczy tongue.gif
-----------
Już na 100ms potrafię zajechać kod biggrin.gif
Co Ty na to ? smile.gif
lobopol
W jquery masz coś takiego jak .stop co blokuje animacje, na mouse in blokujesz animacje i odpalasz nową, na zejściu blokujesz animacje i odpalasz nową. http://api.jquery.com/stop/
Niktoś
Chodzi ci o wywołanie animacji co 5s?Albo skracasz czas,animacji albo odtwarzasz nową uprzedniej nie kończąc, innej rady chyba nie ma-bo logicznie ukończyć odtwarzać animacje, która trwa np 30s co 5s się chyba nie da.
peja1990
Cytat(lobopol @ 27.04.2012, 22:18:06 ) *
W jquery masz coś takiego jak .stop co blokuje animacje, na mouse in blokujesz animacje i odpalasz nową, na zejściu blokujesz animacje i odpalasz nową. http://api.jquery.com/stop/


A jak byś zastosował tę metodę do tego kodu ?
http://jsfiddle.net/fvzFg/4/
lobopol
Do tego kodu bym nie stosował bo jest ogólnie rzecz biorąc zły. W linku który dałem masz bardzo dobre przykłady.
peja1990
Cytat(lobopol @ 27.04.2012, 22:29:49 ) *
Do tego kodu bym nie stosował bo jest ogólnie rzecz biorąc zły. W linku który dałem masz bardzo dobre przykłady.


Co w takim razie w tym kodzie jest według Ciebie źle ?
lobopol
Trochę już przysypiający jestem, ale proszę:
-wyważanie muru masz metodę slideup i slidedown
-niepotrzebny live
-dziwne używanie funkcji *jak już bym miał tak robić użyłbym 2)

takie majaki przysypiającej osoby http://jsfiddle.net/fvzFg/5/ ogólnie do poprawki jeżeli mamy użyć to na wielu elementach, ale tylko drobnych (data dodałem bo już nie myślę)
peja1990
Cytat(lobopol @ 27.04.2012, 22:51:25 ) *
Trochę już przysypiający jestem, ale proszę:
-wyważanie muru masz metodę slideup i slidedown
-niepotrzebny live
-dziwne używanie funkcji *jak już bym miał tak robić użyłbym 2)

takie majaki przysypiającej osoby http://jsfiddle.net/fvzFg/5/ ogólnie do poprawki jeżeli mamy użyć to na wielu elementach, ale tylko drobnych (data dodałem bo już nie myślę)



Dzięki, a ja w tym czasie napisałem coś takiego i też działa smile.gif
http://jsfiddle.net/fvzFg/6/

Czemu live() ?
W tym kodzie nie ma tego co jest w rzeczywistości ;P
W bloku, na który najeżdżasz są jeszcze dwa inne bloku i by funkcja nie wykonywała się w tym przypadku 3 razy tj. w przypadku mouseover(), potrzebujemy metody live() tongue.gif
Niktoś
A próbpwałeś z toggle?
Dzisiaj późno już,ale jutro popatrze z toggle.
peja1990
Cytat(Niktoś @ 27.04.2012, 23:05:40 ) *
A próbpwałeś z toggle?
Dzisiaj późno już,ale jutro popatrze z toggle.


Już sobie poradziłem wink.gif
351 linijek ładnego i w 100% super działającego kodu czego wynikiem jest ładny skrypcik dynamicznej listy rozwijalnej z opcjami typu checkbox i radio w ładnym stylu smile.gif

Dzięki wszystkim za pomoc !

---
Serdecznie pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.