7

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?

bugwheels94
  • 30,681
  • 3
  • 39
  • 60
Nir Golan
  • 270
  • 1
  • 3
  • 15

2 Answers2

16

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');
});
Alex Mulchinock
  • 2,119
  • 1
  • 18
  • 25
2
$('preloader').on("animationend", function(){
    $(this).css('display', 'none');
});

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

Hope it helps

Peter Ulf Jørgensen
  • 31
  • 2
  • 2
    If preloader is an id don't you think you have to use like this `$('#preloader')` – Aman Rawat Apr 07 '17 at 10:09
  • 2
    no, `.one("eventname")` is valid. it's the same as `.on("eventname")` but it auto-removes itself after the event runs once: http://api.jquery.com/one/ – Chris Barr Feb 21 '19 at 19:36