0

ここに画像の説明を入力

jQuery を使用して、非常にシンプルで短いアニメーションを作成しようとしています。

親と子で構成されたキーワードの ul リストがあります。アニメーションは要素の最初のレベルを表示し、次に 2 番目のレベルと 3 番目のレベルを表示する必要があります。

誰かが、これには 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>

次のようになります。 ここに画像の説明を入力

4

1 に答える 1

0

CSS3 を使用してフェードインする方法の簡単な例を次に示します...

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

scss (sass with compass) は...

.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;
  }
}

1 番目、2 番目、3 番目のクラスはすべて不透明度 0 から始まります。基本的には、プロパティが変更されたときに、各 div のanimate 1 transition-delay`transition all 1s ease-in-outの変更に 1 秒かかることを確認して、各グループがフェードインする時点で変更することを意味します。. Then when anclass is added to the wrapping div, the opacity will change tofor 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';
于 2013-08-21T01:15:33.603 に答える