0
私が達成したいものの短い説明にクラス、変更のCSSを受け取る：要素が別の要素
ショーをし、別の要素がクラスを取得するときに要素のCSSアニメーションを有効にします。
少し長い説明：
ID」ウィジェット-1” はクラス 『通常不透明度』を取得して李要素は、私が欲しいものDIV「アニメーション・widget-でアニメーション1 "を開始します。
"normal-opacity"クラスが次のli要素「widget-2」に続くとき。以前のアニメーション（この場合はDIVの "animation-widget-1"）を隠し、代わりにその現在のli要素（この場合はwidget-2）にリンクされているアニメーションを表示します。
最後に、「normal-opacity」クラスが最初のli要素「widget-1」に戻ったとき、アニメーションが再開したいと思います。
HTML
リストのセクションと隠されたアニメーションを含むDIV。
<section id="widget-section">
<div class="function-content">
<ul class="function-list">
<li class="normal-opacity" id="widget-1">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li id="widget-2">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li id="widget-3">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
<li id="widget-4">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</li>
</ul>
</div>
<div class="animations">
<div class="animated bounceoutdown" id="animation-widget-1">
<i class="material-icons md-48 animated bounceindown">smartphone</i>
<i class="material-icons md-48 animated bounceindown">email</i>
<i class="material-icons md-48 animated bounceindown">chat_bubble_outline</i>
</div>
</div>
</section>
jQueryの
クラス「通常不透明度」は、リスト内の次のli要素にまで「機能リスト」
$(function() {
var lis = $("#widget-section .function-list> li"),
currentHighlight = 0;
N = 6; //interval in seconds
setInterval(function() {
currentHighlight = (currentHighlight + 1) % lis.length;
lis.removeClass('normal_opacity').eq(currentHighlight).addClass('normal_opacity');
}, N * 1000);
});
CSSをジャンプ
/*MAKES LI ELEMENT HAVE OPACITY 0.5*/
.function-list li {
opacity: 0.5;
}
.function-list .normal-opacity {
opacity: 1;
}
/*HIDES THE ANIMATION*/
.animations {
visibility: hidden;
}
/*DECIDE WHEN ANIMATIONS WILL START*/
#animation-widget-1 {
animation-delay: 5s;
}
#animation-widget-1 i:first-child {
animation-delay: 1s;
}
#animation-widget-1 i:nth-child(2) {
animation-delay: 1.3s;
}
#animation-widget-1 i:last-child {
animation-delay: 1.6s;
}
私はこの質問が奇妙なものではなく、私の記述がかなり良いことを願っています。
リストアニメーションのGIF：Link to Giphy
これを解決するためのソリューション/ヒントやトリックスにコメントしてください:)