Question

我在大多数网站上都使用animate.css，因为它很棒，但我经常遇到问题。

请参阅此链接 - ＆gt; http://quemfazsite.com.br/temp/teste8.php

如果你想检查下面的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />


</head>

<body>

<div onclick="$('#xxx').removeClass('flipInX').addClass('flipInX');" style="cursor:pointer;">CLICK TO ANIMATE IMMEDIATLY!</div>

<div onclick="$('#xxx').removeClass('flipInX'); window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);" style="cursor:pointer;">CLICK TO ANIMATE WITH TIMEOUT!</div>

<div id="xxx" style="background:#FF0000; width:500px; height:500px;" class="animated flipInX"></div>

</body>
</html>

我已经有了一个元素＆＃34; flipInX＆＃34;页面加载时好吧，如果你点击第一个按钮（页面顶部），我只需删除这个类并再次添加它。但没有动画发生！我用这个：

$('#xxx').removeClass('flipInX').addClass('flipInX');

但如果我使用第二个按钮（下面的代码），动画就会发生：

$('#xxx').removeClass('flipInX');
window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);

jquery有一些错误吗？我的意思是，如果使用＆＃34; removeClass＆＃34;删除了类，那看起来链接就不起作用了。当课程被加回来时效果应该有效！发生了什么，我该如何解决？

编辑：

下面的代码也不起作用，所以不要浪费你的时间使用延迟，因为不幸的是它不会工作：（

$('#xxx').removeClass('flipInX').delay(1000).addClass('flipInX');

Answer 1

延迟对于addClass不起作用，首先是问题，建议使用setTimeout（）或.queue（）。

也许 .animate（）是您尝试实现目标的好方法

Answer 2

动画有延迟执行，以毫秒为单位。

删除类并立即重新添加时，动画没有时间执行。 jQuery不会“等待”动画在“删除”和“添加”之间执行。

需要setTimeout()才能让你在重新添加类之前看到类删除的动画......这就是你告诉jQuery在两者之间等待的方法。

并且.delay()适用于jQuery动画队列......所以在两个animate()之间，它会起作用。它在调用CSS动画的addClass()和removeClass()之间无效。

<小时/> 的修改

如果您想使用CDN中的CSS动画，则无法使用setTimeout() 否则，您可以使用@keyframe制作自己的CSS动画但是，如果您关注标记简化，可以在单击处理程序中使用它。所以你需要的只是课程animated。

$(".animated").on("click",function(){
  $(this).removeClass("flipInX");
  var that=$(this);
  setTimeout(function(){
    that.addClass("flipInX");
  },100);
});

CodePen

为什么用jquery删除类没有快速完成？

2 个答案: