我正在使用 js-caurousal
来更改工作正常的背景图像。除此之外,我还为每张幻灯片添加了标题,我使用 animation.css
和 wow.js
制作了淡入淡出效果的动画。
我遇到的问题是动画只播放一次,我想在幻灯片事件时为字幕文本播放动画。我试图寻找解决方案,但找不到太多。
所以我想从具有 slide-caption
类的元素中添加和删除 wow fadeIn
。
下面是幻灯片的代码
<div class="js-carousel u-carousel-v5" data-autoplay="true" data-infinite="true" data-fade="true" data-speed="4000">
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/1.jpg);">
<h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s">Image One</h3>
</div>
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/2.jpg);">
<h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s">Image Two</h3>
</div>
</div>
我如何使用以下 $( ":hidden").attr( "aria-hidden", "true")
在 slide-caption
中添加和删除 css >
最佳答案
我认为您应该将它用作属性选择器 并执行如下操作:
$('div[aria-hidden=false] .slide-caption').removeClass('wow fadeIn');
.wow.fadeIn {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-carousel u-carousel-v5"
data-autoplay="true"
data-infinite="true"
data-fade="true"
data-speed="4000">
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/1.jpg);">
<h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s" >Image One</h3>
</div>
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="true" style="background-image: url(assets/img/2.jpg);">
<h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s" >Image Two</h3>
</div>
<div class="js-slide g-bg-img-hero g-height-100vh--md g-min-height-300" aria-hidden="false" style="background-image: url(assets/img/2.jpg);">
<h3 class="slide-caption wow fadeIn" data-animation="animated fadeIn" data-wow-delay="4s" >Image Three</h3>
</div>
</div>
关于javascript - 根据父元素属性更改元素的 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48004284/