2
\$\begingroup\$

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();
});
\$\endgroup\$
  • \$\begingroup\$ Can you add the HTML to go with this? \$\endgroup\$ – abuzittin gillifirca Oct 27 '14 at 6:43
3
\$\begingroup\$

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>

\$\endgroup\$
  • \$\begingroup\$ Additionally, the first snippet is not working for me (connection reset). \$\endgroup\$ – rolfl Dec 9 '14 at 16:06
  • \$\begingroup\$ Rolfl, I'll check my syntax again \$\endgroup\$ – Eyal Dec 9 '14 at 16:10
  • \$\begingroup\$ 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. \$\endgroup\$ – Eyal Dec 9 '14 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.