Question

我正在开发一个包含许多连续元素的商业广告，这些元素都在页面加载时实现了jQuery UI的.animate()功能。

为了让jQuery更有效地运行，我一直试图将下面的脚本压缩成一个函数，但是如果没有jQuery同时运行每个.animate()函数而不是连续执行，那么似乎无法这样做增量。

如果你想查看我的test site以查看我的目标，我试图以“服务”开头的增量动画左边的每个li类，以'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 );
} );

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

1 个答案: