[JavaScript] Problem z metodą animacji animate() Opcje

[peja1990]

Witam,
mam pewien problem z animacją.
Pozwolę sobie od razu przedstawić kod prościutkiej funkcji:

[PHP] pobierz, plaintext 
function showOptions(e = "div", status = "expand" height = 100) {
	// Ustalam wysokość diva
	if(!height || height == 0) {
		return $(e).children('.options').height();
	}
	if(status == "expand") {
		$(e).children('.options').css('height', '0px').show().animate({
			height : '+=' + height // No i tutaj cały problem !
		});
	}
}
[PHP] pobierz, plaintext 

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 
function showOptions(e = "div", status = "expand" height = 100) {
[JAVASCRIPT] pobierz, plaintext 

-chyba trzy parametry powinny być,brak przecinka?Powinno być:

[JAVASCRIPT] pobierz, plaintext 
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 
if((height=="undefined") || (height == 0)) {
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Niktoś 27.04.2012, 21:07:51

[peja1990]

No i widzisz nie lepiej tak od razu,a nie nie chce mi się?
Błędy które zauważyłem:

[JAVASCRIPT] pobierz, plaintext 
function showOptions(e = "div", status = "expand" height = 100) {
[JAVASCRIPT] pobierz, plaintext 

-chyba trzy parametry powinny być,brak przecinka?Powinno być:

[JAVASCRIPT] pobierz, plaintext 
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 
if((height=="undefined") || (height == 0)) {
[JAVASCRIPT] pobierz, plaintext 

No widzisz
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.

Ten post edytował Niktoś 27.04.2012, 21:13:35

[peja1990]

Odpowiedź prosta ,zobacz:
http://jsfiddle.net/fvzFg/4/
Możesz regulować tempo w animate ,jak chcesz.

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


-----------
Daj sobie trochę cierpliwości i przekonaj się, że nie masz racji ;P
http://jsfiddle.net/fvzFg/4/
-----------
500 - w zupełności wystarczy
-----------
Już na 100ms potrafię zajechać kod
Co Ty na to ?

Ten post edytował peja1990 27.04.2012, 21:18:53

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

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/

Ten post edytował peja1990 27.04.2012, 21:26:29

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

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 ?

Ten post edytował peja1990 27.04.2012, 21:45:14

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

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
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()

[Niktoś]

A próbpwałeś z toggle?
Dzisiaj późno już,ale jutro popatrze z toggle.

[peja1990]

A próbpwałeś z toggle?
Dzisiaj późno już,ale jutro popatrze z toggle.

Już sobie poradziłem
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

Dzięki wszystkim za pomoc !

---
Serdecznie pozdrawiam