jquery檢測動畫animate.css的結尾

我有一個網站，我正在建立一個閃屏的div。jquery檢測動畫animate.css的結尾

<div id="preloader" class="animated zoomOut"> 
    <div class="loader"> 
     <img src="assets/images/preloader-logo.png" alt="oscar pro logo"/> 
    </div> 
</div>

IM期運用動畫CSS動畫的縮小（ZoomOut），問題是，它的變焦出來後它得到充分的寬度和高度，我不能與網站進行互動。

我tryed使用jQuery它的顯示設置爲none，但我似乎無法推測出來......

$('preloader').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
    $(this).css('display', 'none'); 
});

如果我改變了功能，警報觸發它加載頁面時

有幫助嗎？

來源

2016-11-20 Nir Golan

$('preloader').on("animationend", function(){ 
    $(this).css('display', 'none'); 
});

沒有....一個（「animationend」 .....

希望它可以幫助

來源

2017-04-07 09:53:07

如果預加載是一個id你不覺得你必須使用類似這樣的'$（「＃預加載」）' –

由Peter答案是誤導，原因有二：

1 - jQuery的確實的確有有一個叫做$.one()的功能，除了它的功能$.on()。他們都做了些微不同的事情：

$.one() - 將一個事件處理程序設置爲僅觸發一次。在事件可能被不止一次觸發的情況下（例如懸停時）有用。

$.on() - 設置一個標準事件處理程序，以在事件觸發時觸發。如果您希望每次都觸發某些內容（例如，在關鍵幀上），則這很有用。

2 - 他的回答沒有解決問題的可能原因（根據您在問題中發佈的代碼）。 Aman在Peter的回答中也指出，明顯的錯誤在於爲preloader div指定的選擇器不正確。

它應該是一個有效的CSS選擇器：

$('#preloader').one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
    $(this).css('display', 'none'); 
});

來源

2017-08-30 15:02:40

jquery檢測動畫animate.css的結尾

回答

相關問題