Preloader in jQuery doesn't work

[Mad_Griffith]

Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded.

 

JS:

jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({  -webkit-animation-play-state: 'running';  -moz-animation-play-state: 'running';  -o-animation-play-state: 'running';  animation-play-state: 'running';});});});

 

CSS:

.preloader_wrapper {  position: absolute;  top: 50%;}.preloader_fadein {  -webkit-animation: preloader_fadein 2s ease;  -moz-animation: preloader_fadein 2s ease;  animation: preloader_fadein 2s ease;}@keyframes preloader_fadein {  from { opacity: 0; left: 45%; }  to { opacity: 1; left: 50%; }}.preloader_fadeout {  -webkit-animation: preloader_fadeout 2s ease;  -moz-animation: preloader_fadeout 2s ease;  animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout {  from { opacity: 1; left: 50%; }  to { opacity: 0; left: 55%; }}.header * {  -webkit-animation-play-state: paused;  -moz-animation-play-state: paused;  -o-animation-play-state: paused;  animation-play-state: paused;}

Edited September 15, 2015 by Mad_Griffith

[justsomeguy]

You're trying to define an event handler for a window load event inside the event handler for the document ready event. Won't the window have already loaded by the time the document is ready?

[Mad_Griffith]

Isn't the window load more comprehensive than document ready? It waits until images are loaded as well...

 

Anyways, even without the document ready, the first line of code (adding the class 'preloader_fadein') is skipped:

$('.preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('.preloader_wrapper').removeClass('preloader_fadein');$('.preloader_wrapper').addClass('preloader_fadeout');$('.header *').css({  '-webkit-animation-play-state': 'running',  '-moz-animation-play-state': 'running',  '-o-animation-play-state': 'running',  'animation-play-state': 'running'});});

Edited September 15, 2015 by Mad_Griffith

[dsonesuk]

jQuery(document).ready(function($) and $(window).load(function() are basically doing the same thing once the first one is triggered, the second won't be triggered because that time has passed and jquery code has already been carried out, remove $(window).load(function().You need a way of triggering fade 2 sec using css or jquery using maybe delay().

[dsonesuk]

Can't you just use percentage 0 - 50 fade in 50 to 100 fade out using a single class

 

using http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-direction example

div {    width: 100px;    height: 100px;    background: red;    position: relative;    animation: myfirst 2s infinite;    opacity:0;}@keyframes myfirst {    0%   {background: red; opacity: 0}        50%  {background: red; opacity: 1}       100% {background: red; opacity: 0}}

[dsonesuk]

Looking at it again, this will run fadein directly after page has loaded except images

jQuery(document).ready(function($) {$('#preloader_wrapper').addClass('preloader_fadein');});

This can be achieved sooner by placing $('#preloader_wrapper').addClass('preloader_fadein'); directly after target element instead

 

This runs after page and images have loaded

$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({  -webkit-animation-play-state: 'running';  -moz-animation-play-state: 'running';  -o-animation-play-state: 'running';  animation-play-state: 'running';});});

 

[Mad_Griffith]

Thanks, my solution for the second part is the following:

$(window).load(function(){  setTimeout(function() {    $('.preloader_wrapper').addClass('preloader_fadeout');    $('body, .header *').css({      '-webkit-animation-play-state': 'running',      '-moz-animation-play-state': 'running',      '-o-animation-play-state': 'running',      'animation-play-state': 'running'    });  }, 1500);});

 

Edited September 15, 2015 by Mad_Griffith