jquery detect animation end of animate.css

Question

У меня есть div заставки для сайта, который я строю.

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

им использованияКонтактная одушевленные CSS, чтобы оживить его ZoomOut, проблема заключается в том, что после того, как его отъезжает он получает полную ширину и высоту, и я не могу взаимодействовать с сайтом.

я судимый использовать JQuery, чтобы установить его дисплей никому, но я не могу показаться, чтобы понять это ...

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

если я изменить функцию предупреждения он срабатывает при загрузке страницы

любая помощь?

Answer 1

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

не .... один ("animationend" .....

Надеется, что это помогает

Answer 2

Ответа Петр вводит в заблуждение по двум причинам:

1 - JQuery действительно имеют функцию $.one(), в дополнение к ее функции $.on(). Оба они делают несколько разные вещи:

$.one() - Устанавливает обработчик событий только один раз. Полезно, если событие может быть случайно запущено более одного раза (например, при наведении).

$.on() - Устанавливает стандартный обработчик событий для запуска при каждом срабатывании события. Полезно, если вы хотите, чтобы что-то срабатывало каждый раз (например, при включении).

2 - В его ответе не рассматривается вероятная причина проблемы (на основе кода, опубликованного с вашим вопросом). Очевидная ошибка, также отмеченная Аманом в комментарии к ответу Питера, заключается в том, что селектор, указанный для вашего preloader div, неверен.

Он должен быть действительным селектор CSS:

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