title: jQuery fadeIn breaks after .delay
body: <p>I have a popup box that shows a bunch of information for a user's profile, irrelevant to this matter, how the box appears is called through jQuery using this script:</p>
  
  <pre><code>$('#overlay').fadeIn();
  $('#widget_ep').fadeIn().delay(1000).queue(function (){
            $('#widget_ep').css({'top' : '20px'});
        });
  </code></pre>
  
  <p>Once the box appears everything is fine. (Note, the initial display for #Widget_ep is "Display:None;".)
  However, when I click the overlay to close the box, that's when I have problems, now the overlay as well as the widget fades out accordingly using the script below:</p>
  
  <pre><code>$("#overlay").click(function(){
      $('#overlay').fadeOut().html("");
      $('#widget_ep').slideUp().delay(1000).queue(function(){$(this).html("")});
  });
  </code></pre>
  
  <p>But my issue is, even though the widget fades out, after calling the script again, the widget fails to appear, only the overlay does.
  What fixes this issue is when I remove the 'delay' function, opening and closing the widget works without error. This would result in me using only this code <code>$('#widget_ep').slideUp().html("");</code></p>
  
  <p>So my question to you is, is there something wrong with my code? Why does the delay function inhibit me from having the widget fade in again, it just maintains its css as <code>display:none;</code></p>