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