Помощь jQuery с сокращением нескольких последовательных функций .animate () - PullRequest
Новая
       17

Помощь jQuery с сокращением нескольких последовательных функций .animate ()

0 голосов
/ 23 июня 2011

Я занимаюсь разработкой бизнес-рекламы с несколькими последовательными элементами, которые все реализуют функцию .animate() пользовательского интерфейса jQuery при загрузке страницы.

Чтобы заставить jQuery работать более эффективно, я пытался сжать приведенный ниже скрипт в одну функцию, но, похоже, не могу этого сделать, если jQuery не будет запускать каждую функцию .animate() одновременно, а не последовательно.с приращениями.

Если вы хотите проверить мой тестовый сайт , чтобы увидеть, к чему я стремлюсь, я пытаюсь анимировать каждый класс li слева с приращением, начиная с 'Services' и заканчиваяс «Домой», но 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);

1 Ответ

1 голос
/ 23 июня 2011

Если я правильно вас понимаю, этот код может помочь: 

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