последовательность анимации jQuery - PullRequest
Новая
       10

последовательность анимации jQuery

2 голосов
/ 17 ноября 2010

Я работаю над сайтом, на котором хочу создать красивое меню, которое исчезает по ссылке.

Se код ниже: Сначала исчезают в #navigation a.toplevel, затем в первом #navigation dt, а затем в следующем и следующем, пока не исчезнет.

Как сделать последовательность фадеинов? 

<div id="navigation">
        <a href="#" class="toplevel">Solutions</a>
        <dl> 
            <dt><a href="#">ERP</a></dt>             
            <dd> 
              <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd>  
            <dt><a href="#">CRM</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
            <dt><a href="#">BI</a></dt>             
            <dd> 
                <ul> 
                    <li><a href="#">About</a></li>                     
                    <li><a href="#">Something</a></li>                     
                    <li><a href="#">Something else</a></li> 
                </ul> 
            </dd> 
        </dl> 
</div>

Заранее спасибо.

Ответы [ 3 ]

9 голосов
/ 17 ноября 2010

Вы имели в виду, как это?

Пример: http://jsfiddle.net/8gFLg/2/

$('#navigation > a, #navigation dt').each(function(idx) {
    $(this).delay( idx * 600 ).fadeIn( 600 );
});
0 голосов
/ 02 января 2013

Упс .. только что понял, что прописанное и несколько кропотливое решение, предложенное ниже, является эквивалентом гораздо более короткого и умного, предложенного пользователем113716 выше - при условии, что элементы для анимации удобно расположены в правильной последовательности в HTML.

Если это не так, вы все равно можете использовать это: 

$(document).ready(function() {
     var time=0;
     var interval=500;
     $('#id1').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id2').delay(time).animate({top:100},interval);
     time=time+interval;
     interval=1000;
     $('#id3').delay(time).animate({top:100},interval);
     time=time+interval;
     $('#id4').delay(time).animate({top:100},interval);
     time=time+interval;
 })

Вот скрипка javascript, основанная на этом коде: http://jsfiddle.net/dj89d/

0 голосов
/ 17 ноября 2010

Просто вложите еще один fadein в вашу функцию fadein. 

 $('#navigation a.toplevel').fadeIn(function(){
      $('#nextthing').fadeIn(function(){
          $('#thenextthing').fadeIn();
      });
 });

Вам нужно знать, как проходить через dt?

...