Either jQuery addClass breaks delay, or jQuery delay breaks CSS transition, or both

Question

I made two divs that slide in and out of visibility upon the press of a button, by adding and removing classes with jQuery and a CSS transition. In this fiddle, pressing one of the buttons works to slide the div over 0.4 seconds: http://jsfiddle.net/uo14dowo/4/

But when I added a few delays, the 0.4s transition suddenly became instantaneous: neither the delay nor the transition are now working. http://jsfiddle.net/uo14dowo/3/

Why is this?

Answer 1

show and hide are not animation methods by default, but you can make them so by passing a duration parameter – in this case, the number 0:

var d= 400;
$("#btn-1").click(function() {
  $("#left").addClass('show').removeClass('clear').delay(d).show(0);
  $("#right").addClass('clear').removeClass('show').delay(d).hide(0);
});

$("#btn-2").click(function() {
  $("#left").removeClass('show').addClass('clear').delay(d).hide(0);
  $("#right").removeClass('clear').addClass('show').delay(d).show(0);
});

Fiddle