複数の連続した.animate（）関数を集約したjQueryのヘルプ

Question

私はjQuery UIの.animate()関数をページロードに実装する連続した要素を持つビジネス広告を開発中です。

jQueryをより効率的に実行するために、以下のスクリプトを1つの関数に集約しようとしていますが、0-の関数をインクリメントで連続して実行するのではなく、

私が目指していることを確認するために私のtest siteをチェックしたいのであれば、左側の各liクラスを 'Services'から始めて 'H​​ome'で終わるインクリメントにしようとしていますが、jQueryは私の以前の試みにアレルギー。

大変お手伝いいたします。

おかげ

の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); 

Answer 1

私が正しくあなたを理解していれば、このコードが役立つことがあります。

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); 
});