当元素接收类时，在另一个元素上更改 css答案

【问题标题】：When element receives class, change css on another element当元素接收类时，在另一个元素上更改 css
【发布时间】：2017-03-28 05:20:39
【问题描述】：

简短描述我想要完成的任务：

当另一个元素获得类时，在一个元素上显示并激活 css 动画。

稍微长一点的描述：

当 ID 为“widget-1”的 li 元素获得“normal-opacity”类时，我希望 DIV“animation-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

“normal-opacity”类跳到列表“function-list”中的下一个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

请评论解决方案/提示和解决此问题的方法:)

【问题讨论】：

标签： jquery css animation

【解决方案1】：

像这样，你只需要将一个类链接到 li 上；

.function-list li.normal-opacity div {
  /* code you want to activate goes here */
}

这样，您在包含的代码 sn-p 中放入的任何内容都将应用于 div。如果您想启动动画，您可能只需要添加必要的animation 属性即可。

【讨论】：