jquery检测动画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> 

IM期运用动画CSS动画的缩小（ZoomOut），问题是，它的变焦出来后它得到充分的宽度和高度，我不能与网站进行互动。

我tryed使用jQuery它的显示设置为none，但我似乎无法推测出来......

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

如果我改变了功能，警报触发它加载页面时

有帮助吗？

Answer 1

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

没有....一个（ “animationend” .....

希望它可以帮助

Answer 2

由Peter答案是误导，原因有二：

1 - jQuery的确实的确有有一个叫做$.one()的功能，除了它的功能$.on()。他们都做了些微不同的事情：

$.one() - 将一个事件处理程序设置为仅触发一次。在事件可能被不止一次触发的情况下（例如悬停时）有用。

$.on() - 设置一个标准事件处理程序，以在事件触发时触发。如果您希望每次都触发某些内容（例如，在关键帧上），则这很有用。

2 - 他的回答没有解决问题的可能原因（根据您在问题中发布的代码）。 Aman在Peter的回答中也指出，明显的错误在于为preloader div指定的选择器不正确。

它应该是一个有效的CSS选择器：

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