jquery点击功能只第一次触发动画答案

【问题标题】：Jquery click function only triggers animation first timejquery点击功能只第一次触发动画
【发布时间】：2017-06-30 09:28:43
【问题描述】：

已经有很多帖子与我的问题相关。然而我找不到解决办法。我必须说我是一个 Javascript 初学者。

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

单个滑块元素的 HTML (Slider Revolution)

<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');
    });
});

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

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

【问题讨论】：

请同时发布您的 html。
尝试创建代码sn-p
刚刚做了，谢谢 Nilesh

标签： onclick animate.css

【解决方案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>

或

其他方式从元素中删除覆盖类并在该元素上再次添加它，请参见下面的代码。

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

【讨论】：

感谢 Nilesh，我尝试了两个版本。添加 removeClass 函数时没有任何变化。第一次单击后，背景被添加，没有动画。使用 toggleClass 函数，每隔一个滑块就会被覆盖。
@pierre ：我更新了上面的答案，看看。但是当动画完成时，它会变回原来的样式。在上面的例子中，点击红色部分，动画就会开始。