Question

我正在尝试点击动画。它是第一次工作，但不是在那之后。使用css设置动画并且工作正常。我的逻辑是总是添加类。我认为删除和添加会帮助它重复。

$('#animateLogo').on('click', function(e) {
            $('#animateLogo').removeClass("animated bounce");
            $('#animateLogo').addClass("animated bounce");
        });

Answer 1

与其他答案类似，animate.css（我假设你使用的）给出了一个例子：

$("#animateLogo").click(function (e) {
    $('#animateLogo').removeClass().addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
});

来源：http://daneden.github.io/animate.css/

Answer 2

尝试不带空格的类名，并尝试从类名中删除空格。

$("#animateLogo").click(function () {
    $('#animateLogo').removeClass("animatedbounce");
    alert("continue");
    $('#animateLogo').addClass("animatedbounce");
});

.animatedbounce {
    font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="animateLogo">Hello World!</button>

小提琴..

http://jsfiddle.net/nk609423/kuxr7ehe/

在Jquery中单击添加和删除类，动画不会触发

2 个答案: