Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] Problem z selectorem :eq(index)
paramoralny
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.09.2010

Ostrzeżenie: (0%)
-----

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ł?
Go to the top of the page
+Quote Post
masiakla
post
Post #2





Grupa: Zarejestrowani
Postów: 80
Pomógł: 17
Dołączył: 4.09.2010
Skąd: far far away

Ostrzeżenie: (0%)
----- 

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

Ten post edytował masiakla 6.09.2010, 15:32:30
Go to the top of the page
+Quote Post
paramoralny
post
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.09.2010

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
masiakla
post
Post #4





Grupa: Zarejestrowani
Postów: 80
Pomógł: 17
Dołączył: 4.09.2010
Skąd: far far away

Ostrzeżenie: (0%)
-----

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.

Ten post edytował masiakla 6.09.2010, 20:22:29
Go to the top of the page
+Quote Post
everth
post
Post #5





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----

Może coś prostszego (IMG:style_emoticons/default/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


Ten post edytował everth 6.09.2010, 22:57:25
Go to the top of the page
+Quote Post
paramoralny
post
Post #6





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.09.2010

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/sad.gif)
myśle, że to przez plugin z easingami (wymaga innej składni przy animate)
Go to the top of the page
+Quote Post
masiakla
post
Post #7





Grupa: Zarejestrowani
Postów: 80
Pomógł: 17
Dołączył: 4.09.2010
Skąd: far far away

Ostrzeżenie: (0%)
-----

Ja chyba jednak będe obstawał przy swoim, bo nie znajduję innej przyczyny, dlaczego callback nie jest wywoływany.
Go to the top of the page
+Quote Post
paramoralny
post
Post #8





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.09.2010

Ostrzeżenie: (0%)
-----

sprawdziłem i muszę powiedzieć, że masz całkowitą rację: kiedy używam plugina callback nie jest wywoływany
Go to the top of the page
+Quote Post
masiakla
post
Post #9





Grupa: Zarejestrowani
Postów: 80
Pomógł: 17
Dołączył: 4.09.2010
Skąd: far far away

Ostrzeżenie: (0%)
-----

jak chcesz uzyskać efekt samego wysuwania się zakładek to nie lepiej by tobie było skorzystać z gotowej metody slideDown ?
Go to the top of the page
+Quote Post
everth
post
Post #10





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----

@paranormalny: nie debugowałem tego kodu (IMG:style_emoticons/default/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


Ten post edytował everth 6.09.2010, 23:07:29
Go to the top of the page
+Quote Post
paramoralny
post
Post #11





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 6.09.2010

Ostrzeżenie: (0%)
-----

Cytat(everth @ 6.09.2010, 23:59:02 ) *
@paranormalny: nie debugowałem tego kodu (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 14:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn