Question

我正在一个网站上工作，我想制作一个漂亮的菜单，逐个链接逐渐消失。

下面的Se代码：首先淡出#navigation a.toplevel，然后是第一个#navigation dt，然后是下一个，然后是下一个，直到没有更多。

你如何制作一系列fadein？

<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>

提前谢谢。

Answer 1

你的意思是这样吗？

示例： http://jsfiddle.net/8gFLg/2/

$('#navigation > a, #navigation dt').each(function(idx) {
    $(this).delay( idx * 600 ).fadeIn( 600 );
});

Answer 2

只需将另一个fadein嵌入你的fadein函数中。

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

你需要知道如何循环使用dt吗？

Answer 3

哎呀......刚才意识到下面建议的拼写和有点费力的解决方案相当于上面用户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/

jQuery动画序列

3 个答案: