You can trim it down a bit by using the index that each() passes to
the callback function:
$('#jq-secondaryNavigation li').each( function(i) {
var that = $(this);
setTimeout( function () {that.fadeIn('slow')}, i * 500 );
});
On Sep 22, 11:14 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
> got it! :D
>
> $('#jq-secondaryNavigation li').each(function(){
> var index = $('#jq-secondaryNavigation li').index(this);
> setTimeout("$('#jq-secondaryNavigation li:eq("+index
> +")').fadeOut(300)",index*500);
>
> });
>
> 500 is the time between the animations.
>
> hope this helps,
> ricardo
>
> On Sep 22, 11:46 pm, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > This works, but there must be a better way (without using a global
> > var).
>
> > fade = function(){
> > $(this).next().fadeIn(500,fade);};
>
> > $('#ul.menu li:first-child').fadeIn(500,fade);
>
> > On Sep 22, 5:34 pm, PaulC <[EMAIL PROTECTED]> wrote:
>
> > > I'm new to jQuery so be gentle!!
>
> > > I have a menu list, and I want each li to fade in one at a time, I can
> > > do this with the following code:
>
> > > $("ul.menu li:first-child").fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000, function () {
> > > $(this).next().fadeIn(1000,
> > > function () {
> > >
> > > $(this).next().fadeIn(1000, function (){
> > >
> > > $(this).next().fadeIn(1000, function (){
> > >
> > > $(this).next().fadeIn(1000);
> > > })
> > > });
> > > });
> > > });
> > > });
> > > });
> > > });
>
> > > As you can see its not nice! I'm sure there is a better way,
> > > especially as the menu is dynamic so I'd never know how many items
> > > there are.
>
> > > Any help or advice is appreciated.
