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?

Alex Mulchinock · Accepted Answer · 2017-08-30 15:02:40Z

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');
});

Peter Ulf Jørgensen · Accepted Answer · 2017-04-07 09:53:07Z

3

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

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

Hope it helps

answered Apr 7, 2017 at 9:53

Peter Ulf Jørgensen

412 bronze badges

2 Comments

Aman Rawat Over a year ago

If preloader is an id don't you think you have to use like this $('#preloader')

Chris Barr Over a year ago

no, .one("eventname") is valid. it's the same as .on("eventname") but it auto-removes itself after the event runs once: api.jquery.com/one

Collectives™ on Stack Overflow

jquery detect animation end of animate.css

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related