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

问题描述

| 我正在开发带有许多连续元素的商业广告，这些元素均在页面加载时实现jQuery UI的

.animate()

函数。 为了使jQuery更加有效地运行，我一直试图将以下脚本压缩为一个函数，但是如果没有同时运行每个

.animate()

函数而不是逐个递增运行jQuery，似乎无法做到这一点。 如果您想查看我的测试站点以查看我的目标，我尝试为左侧的每个li类设置动画，以\'Services \'开始，以\'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); 

    

解决方法

        如果我对您的理解正确，那么此代码可能会有所帮助：

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