Loading screen animation
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 &amp; 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;
  }
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="A"&gt;&lt;/div&gt;
&lt;div id="B"&gt;&lt;/div&gt;




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;
  }
}
&lt;div id="A"&gt;&lt;/div&gt;
&lt;div id="B"&gt;&lt;/div&gt;