jQuery动画序列

Posted 2023-05-08

【中文标题】jQuery动画序列

【英文标题】：jQuery animation sequence

【发布时间】：2011-05-11 09:43:36

【问题描述】：

我正在一个网站上工作，我想制作一个漂亮的菜单，该菜单会逐个链接淡入淡出。

下面的代码： 首先淡入#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>

提前谢谢你。

【参考方案1】：

你是这个意思吗？

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

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

【讨论】：

没错！那你能告诉我，在最后一个 DT 淡入后如何在另一个元素上添加一个 slideDown ？也许如何添加一个类，然后淡入淡出？

@Kenneth B：我需要更多关于 slideDown 的细节。就像哪个元素在下滑？你的意思是每个<dd>？另外，不确定添加淡入的类是什么意思。

@Kenneth B：也许这就是您对 slideDown 的意思？ jsfiddle.net/8gFLg/3

【参考方案2】：

只需在您的淡入淡出函数中嵌套另一个淡入淡出。

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

---

你需要知道如何循环遍历 dt 吗？

【讨论】：

谢谢！ :-) 如果我这样做，假设 10 次，以确保即使我的客户端添加了一些链接，效果仍然有效，然后 IE 会抱怨，因为还没有 10。我该怎么办？一个如果？

我怎样才能让不同的 DT 在彼此之后淡入，而不是同时淡入，而不给它们不同的类？

上面的代码应该是一个接一个，而不是同时...我稍后会用一种计数和循环遍历每个dt的方式发表评论

【参考方案3】：

糟糕.. 刚刚意识到下面建议的详细说明且有些费力的解决方案相当于上面 user113716 建议的更短且更智能的解决方案 - 但是，条件是要制作动画的项目以正确的顺序方便地排列在 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 fiddle：http://jsfiddle.net/dj89d/