[jQuery] Problem z selectorem :eq(index) Opcje

[paramoralny]

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ł?

[everth]

@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 
jQuery.fn.showCascade = function(options) {
   var settings = jQuery.extend({
      duration: 500,
      animate: {
         height: '100px',
         width: '100px'
      },
      easing:'easeOutElastic',
      css:{"lineHeight":"100px","overflow":"visible"}
   }, options);
 
   var inputObj = $(this);
   var iter= {i:-1, end:inputObj.length};
 
   function showThisItem(obj) {
      if (!obj) return;
      obj.css(settings.css).animate(settings.animate,
	settings.duration,
	settings.easing,
	 function() {
	    showThisItem(getNext());
	 }
      );
   }
   function getNext() {
      iter.i++;
      return (iter.i<iter.end) ? inputObj.eq(iter.i):false;
   }
   showThisItem(getNext());
   return this;
}
//użycie z parametrami domyślnymi
$('.nav').showCascade();
//z własnymi parametrami
$('.nav').showCascade({
   duration:1000,
   easing:false,
   animate: {width:'100px',height:'200px'},
   css:{"lineHeight":"200px","overflow":"none"}
});
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował everth 6.09.2010, 23:07:29