我在我的大多数网站中都使用 animate.css,因为它非常棒,但我经常遇到问题。
请查看此链接 -> 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>
当页面加载时,我已经有了一个类为“flipInX”的元素。好的,如果您单击第一个按钮(页面顶部),我只需删除此类并再次添加它。但是没有动画发生!我用这个:
$('#xxx').removeClass('flipInX').addClass('flipInX');
但是如果我使用第二个按钮(下面的代码),动画就会发生:
$('#xxx').removeClass('flipInX');
window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);
jquery 有什么错误吗?我的意思是,看起来链接没有正常工作,如果使用“removeClass”删除了类,那么当类被添加回来时效果应该会起作用!这是怎么回事,我该如何解决?
编辑:
下面的代码也不起作用,所以不要浪费你的时间使用延迟,因为不幸的是它不会起作用:(
$('#xxx').removeClass('flipInX').delay(1000).addClass('flipInX');
最佳答案
延迟对addClass不起作用,第一个问题,建议使用setTimeout()或.queue()。
也许 .animate() 是您想要实现的目标的好方法
关于jquery - 为什么用 jquery 删除类的速度不快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45716823/