爲什麼使用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刪除類沒有快速完成？

回答

相關問題