CODEWITHSUNDEEP
jqueryanimationfadeinjquery-animate
curly_brackets
curly_brackets

Reputation: 5598

jQuery animation sequence

I'm working on a website where I want to make a nice menu, that fades in link by link.

Se code below: First fade in #navigation a.toplevel, then the first #navigation dt, and then the next, and the next until there ain't no more.

How do you make a sequence of fadein?

<div id="navigation">
        <a href="#" class="toplevel">Solutions</a>
        <dl> 
            <dt><a href="#">ERP</a></dt>             
            <dd> 
              <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd>  
            <dt><a href="#">CRM</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
            <dt><a href="#">BI</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
        </dl> 
</div>

Thank you in advance.

Upvotes: 2

Views: 6542

Answers (3)

Francis
Francis

Reputation: 792

Oops.. just realized that the spelled-out and somewhat laborious solution suggested below is the equivalent of the much shorter and smarter one suggested by user113716 above - on condition however, that the items to animate are conveniently arranged in the correct sequence in html.

If that's not the case, you can still use this one:

$(document).ready(function() {
     var time=0;
     var interval=500;
     $('#id1').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id2').delay(time).animate({top:100},interval);
     time=time+interval;
     interval=1000;
     $('#id3').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id4').delay(time).animate({top:100},interval);
     time=time+interval;
 })

Here is a javascript fiddle based on this code: http://jsfiddle.net/dj89d/

Upvotes: 0

user113716
user113716

Reputation: 322462

Did you mean like this?

Example: http://jsfiddle.net/8gFLg/2/

$('#navigation > a, #navigation dt').each(function(idx) {
    $(this).delay( idx * 600 ).fadeIn( 600 );
});

Upvotes: 9

Blowsie
Blowsie

Reputation: 40525

Simply nest another fadein inside your fadein function.

 $('#navigation a.toplevel').fadeIn(function(){
      $('#nextthing').fadeIn(function(){
          $('#thenextthing').fadeIn();
      });
 });

Do you need to know how to loop through the dt's?

Upvotes: 0

Related Questions