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

我在我的大部分网站中都使用animate.css，因为它很吓人，但我经常遇到问题。为什么使用jquery删除类没有快速完成？

请访问以下链接 - 如果你要检查以下>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的一些bug？我的意思是，它看起来像链不能正常工作，如果该类已被删除“removeClass”，该效果应该工作时，类加回来！发生了什么，我该如何解决它？

编辑：

下面的代码没有工作过，因此不需要使用延迟造成浪费你的时间很遗憾，不会工作:(

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

来源

2017-08-16 Samul

“请参阅此链接 - >”编号在您的问题中发布[mcve]以便我们可以看到问题。我不喜欢访问未知的第三方派对网站，而且一旦问题得到解决，相关的代码问题就会消失。 – j08691

@ j08691对不起，亲爱的朋友，我粘贴了代码，以便更好地看到它。 – Samul

-1

动画有一个延迟执行，在毫秒。

当您删除类，并立即重新添加，动画没有时间来执行。jQuery的不“等待”补间动画“删除”和“添加”来执行。

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

而且.delay()作品jQuery的动画队列......于是两个animate()之间，它会工作。它在调用CSS动画的addClass()和removeClass()之间不起作用。

编辑

你没有选择使用setTimeout()如果你想使用CSS动画从CDN。
否则，您可以使用@keyframe制作属于自己的CSS动画...
但是，如果您关心的是标记简化问题，那么您可以将它放在点击处理程序中。所以你需要的是类animated。

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

CodePen

来源

2017-08-16 14:57:37

嗨，我的朋友，使用setTimeout将很难，因为我在我的代码中的许多地方使用removeClass（）。addClass（），它会打破jQuery允许的链接！有没有办法像remove（）。setTimeout（100）.addClass（）那样，chaiin中的其余代码只会在100ms后执行？ – Samul

我编辑了你可能喜欢的东西，关于简化的标记。 –

Downvoter，免费评论！ –

延迟不会对addClass，第一个问题，使用的setTimeout（）的或.queue（）工作的建议。

也许。animate（）是您尝试实现的一个好方法

来源

2017-08-16 15:09:37 Neil

我不喜欢动画，对不起！这并不快。你知道使用setTimeout与jQuery允许的链接吗？ – Samul

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

回答

相关问题