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

我试图在点击时发生动画。它第一次运作，但不是在那之后。动画是用CSS设置的，并且工作正常。我的逻辑是总是添加类。我认为删除和添加将有助于重复。在Jquery中点击添加和删除类，动画不会触发

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

来源

2014-09-25 Alexis Lynne Handler

你试过把一个断点的点击回调函数里面？尝试一下，看看它是否不止一次地触发断点。 – 2014-09-25 19:06:58

点击工作，它停止每次点击这里是我从http://daneden.github.io/animate.css/ – 2014-09-25 19:16:05

@AlexisLynneHandler，我更新了我的答案包括animate.css – 2014-09-25 19:28:48

类似于其他的答案中，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/

来源

2014-09-25 19:19:46

无法正常工作：/ http://jsfiddle.net/BrianDillingham/andykpc1/ – 2014-09-25 19:42:23

如果您从按钮的类中删除该类，该解决方案也可以工作 – 2014-09-26 00:39:08

-1

尝试类名和尝试从类名称中删除空格。

$("#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/

来源

2014-09-25 19:22:44 Kris

OP使用的CSS库需要“反弹”类。另外，'addClass（'one two three'）'不是jQuery的问题，也是一种一次性添加多个类的常见方法 – 2014-09-25 19:39:03

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

回答

相关问题