Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Problem z selectorem :eq(index)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
paramoralny
6.09.2010, 12:26:44
Witam,
jestem grafikiem-amatorem, który postanowił wziąć się za projektowanie stron www i w trakcie nauki napotykam różne problemy po czym staram się je zrozumieć

tego rozgryźć nie mogę chociaż wydaje się prosty

chcę żeby elementy paska nawigacyjnego pojawiały się po kolei, działa gdy każdemu nadam oddzielne id ale staram się to pominąć i skorzystać z szerokiej gamy dostępnych 'wybieraczy'
.nav:eq(0),.nav:eq(1),.nav:eq(2)... w teorii wybierają kolejne elementy o class="nav", w praktyce wyskakuje pierwszy i basta...

CODE
$(".centered").click(function()
{
$(this).slideToggle('fast');
$(".nav:eq(0)").css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function()
{$(".nav:eq(1)").css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function()
{$(".nav:eq(2)").css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function()
{$(".nav:eq(3)").css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function()
{$(".nav:eq(4)").css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'});
});
});
});
});
});


próbowałem też przerobić ten kod na prostszy: pętle wywołującą kolejne nav-y ale okazało się to nie na moją głowę, może na to też macie pomysł?
masiakla
6.09.2010, 15:31:20 
[JAVASCRIPT] pobierz, plaintext 
  1. $(".centered").click(function() {
  2. $(this).slideToggle('fast');
  3. $(".nav").first().css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function() {
  4. 	$(this).next('nav').css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function() {
  5. 		$(this).next('nav').css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function() {
  6. 			$(this).next('nav').css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'},function() {
  7. 				$(this).next('nav').css({"lineHeight":"100px","overflow":"visible"}).animate({height:'100px', width:'100px'},{duration: 500,easing:'easeOutElastic'});
  8. 			});
  9. 		});
  10. 	});
  11. });
  12. });
[JAVASCRIPT] pobierz, plaintext

Ja osobiście wolałbym to załatwić setTimeout'em ...
paramoralny
6.09.2010, 19:43:19
hmm... to nie rozwiązuje problemu... wyskakuje tylko pierwszy div...

Cytat(masiakla @ 6.09.2010, 16:31:20 ) *
Ja osobiście wolałbym to załatwić setTimeout'em ...


...ale czy mógłbyś rozwinąć pomysł z setTimeout?

i czy istnieje sposób, żeby zrobić z tego jedno polecenie (pętle?) wywołującą kolejne elementy?
masiakla
6.09.2010, 20:21:33
Jak patrze na to i na dokumentację animate, to tam zupełnie inaczej wyglądają wywołania tych funkcji:
Kod
.animate( properties, [ duration ], [ easing ], [ callback ] )
.animate( properties, options )

Wersja, którą tu forsujesz nie istnieje, on zapewne podbiera ją pod pierwsze z pustym callbackiem. Więc wywołanie jej powinno raczej wyglądać tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $(....).animate({height:'100px', width:'100px'}, 500,'easeOutElastic',function() { ... });
[JAVASCRIPT] pobierz, plaintext

Kurde chyba zacznę częściej lookać do dokumentacji, bo część rzeczy jednak ucieka, tym bardziej, że rzadko używam animate.
everth
6.09.2010, 21:00:47
Może coś prostszego winksmiley.jpg 
[JAVASCRIPT] pobierz, plaintext 
  1. jQuery.fn.showCascade = function(options) {
  2.    var settings = jQuery.extend({
  3.       duration: 500,
  4.       height: '100px',
  5.       width: '100px',
  6.       easing:'easeOutElastic',
  7.       css:{"lineHeight":"100px","overflow":"visible"}
  8.    }, options);
  9.  
  10.    var inputObj = $(this);
  11.    var iter= {i:-1, end:inputObj.length};
  12.  
  13.    function showThisItem(obj) {
  14.       if (!obj) return;
  15.       obj.css(settings.css).animate(settings,
  16. 	settings.duration,
  17. 	settings.easing,
  18. 	 function() {
  19. 	    showThisItem(getNext());
  20. 	 }
  21.       );
  22.    }
  23.    function getNext() {
  24.       iter.i++;
  25.       return (iter.i<iter.end) ? inputObj.eq(iter.i):false;
  26.    }
  27.    showThisItem(getNext());
  28.    return this;
  29. }
  30. //użycie
  31. $('.nav').showCascade();
  32. //z modyfikatorami
  33. $('.nav').showCascade({
  34.    duration:1000,
  35.    easing:false,
  36.    css:{"lineHeight":"200px","overflow":"none"}
  37. });
[JAVASCRIPT] pobierz, plaintext
paramoralny
6.09.2010, 22:00:46
Cytat(masiakla @ 6.09.2010, 21:21:33 ) *
Wersja, którą tu forsujesz nie istnieje, on zapewne podbiera ją pod pierwsze z pustym callbackiem. Więc wywołanie jej powinno raczej wyglądać tak:


to plugin jquery.easing.1.3.js

@everth
nie wiem co w tym prostego, staram się zrozumieć: reference w łapę i czytamy

ale nie działa sad.gif
myśle, że to przez plugin z easingami (wymaga innej składni przy animate)
masiakla
6.09.2010, 22:03:18
Ja chyba jednak będe obstawał przy swoim, bo nie znajduję innej przyczyny, dlaczego callback nie jest wywoływany.
paramoralny
6.09.2010, 22:30:01
sprawdziłem i muszę powiedzieć, że masz całkowitą rację: kiedy używam plugina callback nie jest wywoływany
masiakla
6.09.2010, 22:37:55
jak chcesz uzyskać efekt samego wysuwania się zakładek to nie lepiej by tobie było skorzystać z gotowej metody slideDown ?
everth
6.09.2010, 22:59:02
@paranormalny: nie debugowałem tego kodu winksmiley.jpg. Poprawiłem tą wersję, teraz wygląda tak. W skrócie to wtyczka jQuery którą możesz stosować na wybranych elementach ze swoimi ustawieniami.
[JAVASCRIPT] pobierz, plaintext 
  1. jQuery.fn.showCascade = function(options) {
  2.    var settings = jQuery.extend({
  3.       duration: 500,
  4.       animate: {
  5.          height: '100px',
  6.          width: '100px'
  7.       },
  8.       easing:'easeOutElastic',
  9.       css:{"lineHeight":"100px","overflow":"visible"}
  10.    }, options);
  11.  
  12.    var inputObj = $(this);
  13.    var iter= {i:-1, end:inputObj.length};
  14.  
  15.    function showThisItem(obj) {
  16.       if (!obj) return;
  17.       obj.css(settings.css).animate(settings.animate,
  18. 	settings.duration,
  19. 	settings.easing,
  20. 	 function() {
  21. 	    showThisItem(getNext());
  22. 	 }
  23.       );
  24.    }
  25.    function getNext() {
  26.       iter.i++;
  27.       return (iter.i<iter.end) ? inputObj.eq(iter.i):false;
  28.    }
  29.    showThisItem(getNext());
  30.    return this;
  31. }
  32. //użycie z parametrami domyślnymi
  33. $('.nav').showCascade();
  34. //z własnymi parametrami
  35. $('.nav').showCascade({
  36.    duration:1000,
  37.    easing:false,
  38.    animate: {width:'100px',height:'200px'},
  39.    css:{"lineHeight":"200px","overflow":"none"}
  40. });
[JAVASCRIPT] pobierz, plaintext
paramoralny
7.09.2010, 18:10:15
Cytat(everth @ 6.09.2010, 23:59:02 ) *
@paranormalny: nie debugowałem tego kodu winksmiley.jpg. Poprawiłem tą wersję, teraz wygląda tak. W skrócie to wtyczka jQuery którą możesz stosować na wybranych elementach ze swoimi ustawieniami.


dzięki, tyle rozumiem ale nadal przestudiuje go, żeby zrozumieć co dokładnie robi
świeży jestem w tym wszystkim i każda okazja do nauki jest dobra

a kod działa jak złoto biggrin.gif
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.