jquery 애니메이션 종료 animate.css

Question

나는 건물중인 스플래시 화면의 div가 있습니다. 그 zoomout 애니메이션을하는

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

메신저 useing의 애니메이션 CSS는, 문제는 줌 후에는 전체 폭과 높이를 얻는다 밖으로 난 사이트와 상호 작용하지 못할 것입니다.

내가 없음으로 그 표시를 설정 jQuery를 사용하는 tryed하지만 난 경고하는 기능을 변경하면 내가 그것을 발사 ... 그것을 알아 내기 위해

$('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를 실제로에는 $.on() 기능 외에도 $.one()이라는 기능이 있습니다. 둘 다 약간 다른 기능을 수행합니다.

$.one() - 이벤트 핸들러가 한 번만 발동하도록 설정합니다. 이벤트가 우연히 두 번 이상 트리거 될 수있는 곳 (예 : 마우스를 올릴 때)에 유용합니다.

$.on() - 이벤트가 트리거 될 때마다 실행되는 표준 이벤트 핸들러를 설정합니다. 매번 한 번씩 (예 : 키 업) 원하는 것을 원하는 경우 유용합니다.

2 - 그의 대답은 문제의 가능한 원인을 다루지 않았습니다 (질문에 게시 한 코드를 기반으로 함). Aman이 Peter의 답변에 대한 의견에서 지적한 명백한 실수는 프리 로더 div에 지정된 선택기가 올바르지 않다는 것입니다.

그것은해야 유효한 CSS 선택기 수 :

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