jquery detect animation end of animate.css

Question

i have a div of a splash screen for a site i'm building.

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

im useing animate css to animate its zoomout, the problem is that after its zooms out it gets full width and height and i cant interact with the site.

i tryed to use jquery to set its display to none but i cant seem to figure it out...

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

if i change the function to an alert it fires when the page loads

any help?

Answer 1

The answer by Peter is misleading for two reasons:

1 - jQuery does indeed have a function called $.one(), in addition to its $.on() function. They both do slightly different things:

$.one() - Sets up an event handler to only fire once. Useful where an event might be accidentally triggered more than once (for example, on hover).

$.on() - Sets up a standard event handler to fire whenever the event is triggered. Useful if you want something to fire every single time (for example, on keyup).

2 - His answer did not address the probable cause of the problem (based on the code you posted with your question). The obvious mistake, as also pointed out by Aman in a comment to Peter's answer, is that the selector specified for your preloader div is incorrect.

It should be a valid CSS selector:

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

Answer 2

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

not ....one("animationend" .....

Hope it helps