jquery - 为什么用 jquery 删除类的速度不快?

标签 jquery css jquery-animate

我在我的大多数网站中都使用 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/

相关文章:

javascript - 如何使用 javascript 检测特定页面加载?

javascript - Vanilla Javascript 单击包含特定文本的 LI

html - 使用属性选择器在 CSS 伪元素中换行

jquery - 在 'font-size' 动画之后动画到 textWidth

点击时的 Jquery 动画

jquery animate 用于元素属性而不是样式

ajax - 阻止 .ajax 双重加载内容

如果值已动态更改,则检查元素不透明度的 Jquery 函数将失败

c# - 由于 Release模式下的包缩小,jQuery 崩溃

javascript - 使用条件 javascript 隐藏整个 div(缺少头像图像)