jquery - 动画级别的元素

Question

我正在尝试使用 jQuery 制作一个非常简单且简短的动画。

有一个 ul 关键字列表，由 parents 和 children 构成。动画应该显示第一级元素，然后是第二级和第三级。

有人告诉我也有 CSS3 解决方案，我不知道该走哪条路.. 有什么想法吗？

谢谢..

更新 ：

目前我只有这样的东西：

<style>
.first {float:left; width:168px; height:68px; background:blue; position:absolute; }
.second {float:left; width:120px; height:32px; background:blue; position:absolute; }
.third {float:left; width:90px; height:26px; background:blue; position:absolute; }
.fourth {float:left; width:auto; height:20px; background:blue; position:absolute; }

.alfa {float: left; width:168px; height:68px; background:blue;}
.beta {float:left; width:120px; height:32px; background:blue; }
.omega {float:left; width:90px; height:26px; background:blue;  }
.orion {float:left; width:auto; height:20px; background:blue;  }

.positiona { margin-left:330px; margin-top:20px; }
.positionb { margin-left:180px; margin-top:50px; }
.positionc { margin-left:280px; margin-top:110px; }
.positiond { margin-left:140px; margin-top:100px; }
.positione { margin-left:180px; margin-top:160px; }
.positionf { margin-left:20px; margin-top:105px; }
.positiong { margin-left:60px; margin-top:140px; }

.positionz { margin-left:0px; margin-top:20px; }
.positionx { margin-left:20px; margin-top:50px; }
.positionv { margin-left:-190px; margin-top:110px; }
.positionn { margin-left:-40px; margin-top:100px; }
.positionm { margin-left:-110px; margin-top:160px; }
.positionl { margin-left:40px; margin-top:105px; }
.positionk { margin-left:20px; margin-top:20px; }
</style>

        <div style="width:505px; float:left;">
            <div class="first positiona">agenius</div>

            <div class="second positionb">echilibru</div>
            <div class="second positionc">planificare</div>

            <div class="third positiond">evolutie</div>
            <div class="third positione">actiune</div>

            <div class="fourth positionf">monitorizare</div>
            <div class="fourth positiong">concepte</div>
        </div>
            <!-- +++++++++++++++++++++ --> 
        <div style="width:505px; float:right;">            
            <div class="alfa positionz">agenius</div>

            <div class="beta positionx">echilibru</div>
            <div class="beta positionv">planificare</div>

            <div class="omega positionn">evolutie</div>
            <div class="omega positionm">actiune</div>

            <div class="orion positionl">monitorizare</div>
            <div class="orion positionk">concepte</div>
        </div>

它看起来像这样：

Answer 1

这是一个如何使用 CSS3 淡入淡出的简单示例...

http://codepen.io/jcreamer898/pen/Dpdlv

scss（带指南针的 sass）是...

.first, .second, .third {
  width: 100px;
  height: 100px;
  @include transition(all 1s ease-in-out);
  opacity: 0;
  border: 1px solid black;
  display:inline-block;
}

.first {
  @include transition-delay(.5s);
  background-color: red;
}

.second {
  @include transition-delay(2s);
  background-color: blue;
}

.third {
  @include transition-delay(3.5s);
  background-color: green;
}

.animate {
  div {
    opacity: 1;
  }
}

第一个、第二个和第三个类都以 0 不透明度开始。这transition all 1s ease-in-out基本上意味着当任何属性发生变化时，请确保每个 div 上的变化. Then when an动画class is added to the wrapping div, the opacity will change to1过渡延迟需要 1 整秒将在每个组淡入的点发生变化。for all of the divs. The

使用标记结构...

<div id="animation">
  <div class="first"></div>
  <div class="first"></div>

  <div class="second"></div>
  <div class="second"></div>

  <div class="third"></div>
  <div class="third"></div>
</div>

然后用一点 JS 启动动画，瞧！

document.getElementById('animation').className = 'animate';