jQuery动画序列

我正在做一个网站，我想制作一个漂亮的菜单，并通过链接淡入。jQuery动画序列

下面的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>

在此先感谢您。

来源

2010-11-17 curly_brackets

你是不是这个意思？

实施例：http://jsfiddle.net/8gFLg/2/

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

来源

2010-11-17 13:25:44 user113716

准确！那么你能告诉我，如何在最后一个DT淡入之后在另一个元素上添加slideDown？也许如何添加一个类，然后淡出？ – 2010-11-17 13:40:56

@Kenneth B：我需要slideDown的更多细节。像哪个元素滑落？你的意思是每个'

'？另外，不知道你的意思是添加一个淡入的类。 – user113716 2010-11-17 13:58:38

@Kenneth B：也许这就是你所说的slideDown？ http://jsfiddle.net/8gFLg/3/ – user113716 2010-11-17 14:07:09

只需在您的淡入淡出功能中嵌套另一个淡入淡出。

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

你需要知道如何通过DT的循环？

来源

2010-11-17 12:56:57 Blowsie

谢谢！ :-)如果我这样做，让我们说10次，以确保即使我的客户端添加了一些链接，效果仍然有效，然后IE会抱怨，因为还没有10。我如何得到这个？ IF？ – 2010-11-17 13:10:19

如何让不同的DT在淡入淡出之后，而不是同一时间，而不给他们不同的类？ – 2010-11-17 13:12:35

上面的代码应该一个接一个地做，而不是在同一时间...... 我将在稍后用一个计数和循环遍历每个dt的方式发表评论 – Blowsie 2010-11-17 13:41:21

糟糕..只是认识到拼写出和稍微费力的溶液下面建议是相当于短得多的，更聪明通过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小提琴：http://jsfiddle.net/dj89d/

来源

2013-01-02 13:07:44 Francis

jQuery动画序列

回答

相关问题