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

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>