gpt4 book ai didi

jquery - 当元素接收类时,更改另一个元素上的 css

转载 作者:行者123 更新时间:2023-11-28 04:03:45 26 4
gpt4 key购买 nike

我想要完成的事情的简短描述:

当另一个元素获得一个类时,在一个元素上显示并激活一个 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

请对解决方案/提示和 trix 发表评论以解决此问题:)

最佳答案

像这样,您只需将一个类链接到 li 上;

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

这样,您放入包含的代码片段中的任何内容都将应用于 div。如果你想开始动画,你可能只需要为你想做的事情添加必要的 animation 属性。

关于jquery - 当元素接收类时,更改另一个元素上的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43055929/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com