代码之家 › 专栏 › 技术社区 › curly_brackets

jquery动画序列

jquery-animate fadein animation jquery

curly_brackets · 技术社区 · 14 年前

我在一个网站上工作,在那里我想做一个不错的菜单,一个接一个的淡入淡出。

SE代码如下: 首先淡入导航A.TopLevel,然后淡入第一个导航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 回复 | 直到 12 年前

user113716 14 年前

http://jsfiddle.net/8gFLg/2/

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

Blowsie Mathias Bynens 14 年前

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

Francis 12 年前

$(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;
 })

http://jsfiddle.net/dj89d/

推荐文章

user8463863 · Android淡入淡出动画问题

7 年前

a1anm · 滚动淡入/淡出在Safari中不起作用

7 年前

user7186765 · 3秒钟不触摸时淡出按钮,用户触摸屏幕时淡入

7 年前

BeSafer · Javascript使文本逐字母淡入,然后淡出

7 年前

Raoul Unger · JQuery:使用fadeIn/fadeOut显示隐藏的div,同时保留间距/流

7 年前

Joseph Montecalvo · 在setTimeout上使用fadeIn fadeOut?

10 年前

cityy · fadeIn()在hide()之后不起作用,hide(()未到达.done()

10 年前

ajq88 · 使用jquery在幻灯片中淡化()图像

11 年前

Altin Ukshini · 使用fadeIn fadeOut使用jquery显示、隐藏复选框

11 年前

juroto · 如何排除某些链接上的JQuery/Javascript淡入淡出功能?

11 年前