Question

已经有很多帖子与我的问题有关。但我找不到解决方案。我必须说我是一个Javascript初学者。

我想在每个4个滑块上放置一个动画叠加层，点击后逐渐动画背景色。单击带有“tparrows”类的按钮时，滑块会切换。我在4个滑块中添加了一个空的，绝对定位的div，称为“overlay-wrapper”，应使用关键帧填充背景色。

单滑块元素的HTML（滑块革命）

<ul>
        <li data-transition="fade"><div class="overlay-wrapper"></div><img src="images/slider/picture.jpg" alt="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"/>
          <h1 class="tp-caption large sfr" data-x="30" data-y="213" data-speed="600" data-start="800" data-easing="Sine.easeOut"><span>Some Text</span></h1>
          <h2 class="tp-caption medium sfr" data-x="30" data-y="310" data-speed="800" data-start="900" data-easing="Sine.easeOut"><span>Some Text</span></h2>
          <h3 class="tp-caption small sfr" data-x="30" data-y="450" data-speed="900" data-start="1000" data-easing="Sine.easeOut"><span><span class="budicon-plus"></span>Some Text</span></h3>

        </li>
...

这是我的CSS代码：

.overlay-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.overlay {
    background-color: rgba(55, 55, 59, 0.5);
    -webkit-animation: bg-color-anim 9s ease-in;
    animation: bg-color-anim 9s ease-in;
}

@-webkit-keyframes bg-color-anim {
    from {
        background-color: rgba(55, 55, 59, 0);
    }
    to {
        background-color: rgba(55, 55, 59, 0.5);
    }
}
@keyframes bg-color-anim {
    0% {
        background-color: rgba(55, 55, 59, 0);
    }
    100% {
        background-color: rgba(55, 55, 59, 0.5);
    }
}

这是我的Jquery，当点击按钮（tparrows）时，应该将带动画的类（overlay）添加到div（overlay-wrapper）：

$(document).ready(function () {
    $(".tparrows").on('click', function () {  //  here $(this) is refering to document
    $(".overlay-wrapper").addClass('overlay');
    });
});

它虽然工作但只有第一次点击！下次添加背景但没有动画。

任何帮助将不胜感激！非常感谢你！干杯，皮埃尔

Answer 1

我在这里更新了你的代码。这将有助于理解问题。我使用toggleClass jquery方法添加/删除类。

$(document).ready(function () {
    $(".tparrows").on('click', function () {  //  here $(this) is refering to document
    $(".tparrows").toggleClass('overlay');
    });
});

.overlay-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;  
}
.tparrows{
background :red;
cursor:pointer;
}
.overlay {
    background-color: red;   
     -webkit-animation-name: bg-color-anim; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: bg-color-anim;
    animation-duration: 4s;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes bg-color-anim {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes bg-color-anim {
    from {background-color: red;}
    to {background-color: yellow;}
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tparrows">
<ul >
        <li data-transition="fade"><div class="overlay-wrapper"></div><img src="http://lorempixel.com/600/250/sports/1/Lorem%20Pixel/" alt="" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat"/>
          <h1 class="tp-caption large sfr" data-x="30" data-y="213" data-speed="600" data-start="800" data-easing="Sine.easeOut"><span>Some Text</span></h1>
          <h2 class="tp-caption medium sfr" data-x="30" data-y="310" data-speed="800" data-start="900" data-easing="Sine.easeOut"><span>Some Text</span></h2>
          <h3 class="tp-caption small sfr" data-x="30" data-y="450" data-speed="900" data-start="1000" data-easing="Sine.easeOut"><span><span class="budicon-plus"></span>Some Text</span></h3>

        </li>
        </ul>
        </div>
</html>

OR

其他方法从元素中删除overlay class并在elemetn上再次添加它，参见下面的代码。

$(document).ready(function () {
    $(".tparrows").on('click', function () {  
       $(".overlay-wrapper").removeClass('overlay');
       $(".overlay-wrapper").addClass('overlay');
    });
});

Jquery点击功能仅在第一次触发动画

1 个答案: