CODEWITHSUNDEEP
jqueryjquery-animate
dcd0181
dcd0181

Reputation: 1503

jQuery help with condensing multiple consecutive .animate() functions

I'm in the process of developing a business advert with a number of consecutive elements which all implement jQuery UI's .animate() function on page load.

For the sake of compelling jQuery to run more efficiently, I've been attempting to condense the below script into one function but can't seem to do so without jQuery running every .animate() function simultaneously instead of consecutively with increments.

If you want to check out my test site to see what I'm aiming for, I am trying to animate each li class on the left in increments starting with 'Services', ending with 'Home' but jQuery seems to be allergic to my previous attempts.

Help would be greatly appreciated!

Thanks

jQuery:

//li classes 
    $('.home').hide();
    $('.home:hidden').delay(650).animate({top:"0"}, 1).show(650);
    $('.home').animate({top:"58"}, 600)

    $('.about').hide(); 
    $('.about:hidden').delay(500).animate({top:"58"}, 1).show(500);
    $('.about').animate({top:"142"}, 600);

    $('.contact').hide();
    $('.contact:hidden').delay(350).animate({top:"142"}, 1).show(350);
    $('.contact').animate({top:"226"}, 600);

    $('.services').hide();
    $('.services:hidden').delay(200).animate({top:"226"}, 1).show(200);
    $('.services').animate({top:"310"}, 600);

//dividers 
    $('#divider_home').hide()
    $('#divider_home').delay(1600).show(650); 

    $('#divider_about').hide()
    $('#divider_about').delay(1800).show(600); 

    $('#divider_contact').hide()
    $('#divider_contact').delay(2000).show(600); 

    $('#divider_services').hide()
    $('#divider_services').delay(2200).show(600);

Upvotes: 0

Views: 871

Answers (1)

CoolEsh
CoolEsh

Reputation: 3154

If I understand you correctly then this code may help:

var liTops = [ 0, 58, 142, 226, 310 ];
var liDelays = [ 650, 500, 350, 200 ];
$( '#thumb' ).children( 'ul' ).find( 'li' ).each( function( i ) { 
    $( this ).hide().delay( liDelays[i] ).animate( { top: liTops[i] }, 1 ).show( liDelays[i] ).animate( { top:liTops[i + 1] }, 600);
} );

var dividerDelays = [ 1600, 1800, 2000, 2200 ];
$( '#left_nav' ).children( 'div[id^="divider_"]' ).each( function( i ) {
    $( this ).hide().delay( dividerDelays[i] ).show( 600 );
} );

Upvotes: 1

Related Questions