jQuery帮助压缩多个连续的.animate（）函数

Question

我正在开发具有多个连续元素的商业广告，这些元素都在页面加载时实现jQuery UI的.animate()函数。为了强制jQuery更有效地运行，我一直试图将下面的脚本压缩到一个函数中，但似乎无法这样做，没有jQuery同时运行每个.animate()函数，而不是连续增量。

如果你想看看我的test site看看我的目标是什么，我试图以'服务'开始，以'Home'结尾，但以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); 
});