Loading screen animation

Question

I am trying to make a loading screen but my code isn't DRY. How could I make it DRY? I have thought about using CSS3 keyframes but I might have problems cross-platform.

$(document).ready(function() {
var lc = $('.loaderContainer'),
 wh = $('.welcomeH'),
 th = $('.toH'),
 meeuh = $('.meeuH'),
 se = $('.siteEnter'),
 sc = $('.seContainer'); 
lc.delay(3500).fadeOut('slow');
wh.delay(3800).fadeIn('slow').delay(2000).fadeOut('slow');
th.delay(6800).fadeIn('slow').delay(2000).fadeOut('slow');
meeuh.delay(9800).fadeIn('slow');
sc.delay(11800).queue(function(){
 sc.css('left', '-120%');
 sc.dequeue();
});
se.delay(12000).queue(function(){
 se.css('margin-left', '-120%');
 se.dequeue();
});
});

I have tried to use callbacks, but I don't know if I have done it correctly. I have only done callbacks to the first block of code, not the second two; I'm still stuck on it.

lc.delay(3500).fadeOut(400, function() {
 wh.delay(800).fadeIn(400, function() {
 $(this).delay(800).fadeOut(400, function() {
 th.delay(800).fadeIn(400, function() {
 $(this).delay(800).fadeOut(400, function() {
 meeuh.delay(800).fadeIn(400)
 });
 });
 });
 });
});
sc.delay(12000).queue(function(){
 sc.css('left', '-120%');
 sc.dequeue();
});
se.delay(12300).queue(function(){
 se.css('margin-left', '-120%');
 se.dequeue();
});

• abuzittin gillifirca: Can you add the HTML to go with this?

Answer 1

Using jQuery you can't make it more DRY than it already is. I tried encapsulating your code in a function with a foreach statement but it only got uglier and generally less readable.

Using callbacks is a good practice but in this case it made your code scary and reduced the readability.

Unfortunately moving css3 animations is not supported on IE9 & IE8 and I'm assuming that from question that this is an issue.

Below are two implementations of the fade in and fade out functionality with animation-delay for reference.

The first implementation is by using jQuery.

$(document).ready(function() {
 var a = $('#A'),
 b = $('#B');
 
 // The reason I'm adding the animation delay in javascript and not setting it
 // in css is to demonstrate the control over when the animation starts. 
 a.css('animation-delay', '3.5s').addClass('fadeOut');
 b.css('animation-delay', '3.8s').addClass('fadeIn');
});

#A,
#B {
 width: 500px;
 height: 500px;
 position: absolute;
 top: 0;
 left: 0;
}
#A {
 background: red;
}
#B {
 background: blue;
 opacity: 0;
}
.fadeIn {
 animation: fadein 2s;
}
.fadeOut {
 animation: fadeout 2s;
}
@keyframes fadein {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}
@keyframes fadeout {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A"></div>
<div id="B"></div>

The second implementation is without jQuery (Vanilla JS)

 document.addEventListener('DOMContentLoaded', function() {
 var a = document.getElementById('A'),
 b = document.getElementById('B');
 a.style.setProperty('animation-delay', '3.5s');
 a.classList.add('fadeOut');
 b.style.setProperty('animation-delay', '3.8s');
 b.classList.add('fadeIn');
 });

#A,
#B {
 width: 500px;
 height: 500px;
 position: absolute;
 top: 0;
 left: 0;
}
#A {
 background: red;
}
#B {
 background: blue;
 opacity: 0;
}
.fadeIn {
 animation: fadein 2s;
}
.fadeOut {
 animation: fadeout 2s;
}
@keyframes fadein {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}
@keyframes fadeout {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}

<div id="A"></div>
<div id="B"></div>

• rolfl: Additionally, the first snippet is not working for me (connection reset).
• Eyal: Rolfl, I'll check my syntax again
• Eyal: Rofl, I've re-run the first snippet and it is working, but there is a delay of 3.5 seconds as per the request of the OP.