根据父元素属性更改元素的CSS属性

时间:2017-12-28 08:43:20

标签: javascript jquery css animation

我正在使用js-caurousal更改工作正常的背景图片。除此之外,我还为每张幻灯片添加了标题,我使用animation.csswow.js为幻灯片效果制作动画。

我遇到的问题是动画只播放一次,我想在幻灯片活动时播放字幕文本的动画。我试图寻找解决方案,但我找不到多少。

所以我想加入&从已wow fadeIn类的元素中删除slide-caption

以下是幻灯片显示的代码

<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

2 个答案:

答案 0 :(得分:1)

我认为您应该将其用作属性选择器并执行以下操作:

$('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>

答案 1 :(得分:-1)

做样式

&#13;
&#13;
.parentProperty1 .childClr {
     color: red;
}

.parentProperty2 .childClr {
     color: blue;
}
&#13;
Your CSS Selector should be like
&#13;
&#13;
&#13;