Jquery 当元素接收到类时,更改另一个元素上的css
我想要完成的事情的简短描述: 当另一个元素获得类时,显示并激活元素上的css动画 稍长一点的描述: 当ID为“widget-1”的li元素获得类“normalopacity”时,我希望DIV“animation-widget-1”中的动画开始 当类“正常不透明度”继续到下一个li元素“widget-2”时。我想隐藏以前的动画(在本例中为DIV“animation-widget-1”),而是显示与当前li元素(在本例中为widget-2)链接的动画 最后:当类“normalopacity”返回到第一个li元素“widget-1”时,我希望动画重新启动 HTML 包含列表和包含隐藏动画的div的部分Jquery 当元素接收到类时,更改另一个元素上的css,jquery,css,animation,Jquery,Css,Animation,我想要完成的事情的简短描述: 当另一个元素获得类时,显示并激活元素上的css动画 稍长一点的描述: 当ID为“widget-1”的li元素获得类“normalopacity”时,我希望DIV“animation-widget-1”中的动画开始 当类“正常不透明度”继续到下一个li元素“widget-2”时。我想隐藏以前的动画(在本例中为DIV“animation-widget-1”),而是显示与当前li元素(在本例中为widget-2)链接的动画 最后:当类“normalopacity”返回到第
<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>
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列表动画:
请评论解决此问题的解决方案/技巧和trix:)像这样,您只需将一个类链接到li上
.function list li.normal-opacity div{
/*你想激活的代码在这里*/
}
/*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;
}