Why is my last hide() instantaneous?

Why is my last hide() instantaneous?

I'm making a couple of text boxes appear and fly in from the left, one after another to nest on top of one another. That works fine. Then, I want them to both fadeout by hiding the containing div of both. Except my hide() is instantaneous. They just blink out instead of fading. I've also tried fadeOut and slideUp, which also have no delay. Any idea why I can't get a delay on the last hide? tks.

  1.   <style>
  2.     .box {width:30%;padding:3px;border:5px outset black;position:absolute;background-color:lightyellow;}
  3.     .msg1 {z-index:1}
  4.     .msg2 {z-index:2}
  5.     .closer {display: inline-block;position: absolute;top: 0px;right:0px;color:red;}
  6.   </style>

  1. <button id="click">clickme</button>
  2.   <p>
  3.       twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.
  4. <div class="bigdiv">
  5.     <div class="box msg1"><br />this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para
  6.     </div>
  7.     <div class="box msg2"><br />this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para this is a div inside a  para
  8.     </div>
  9.  </div>
  10.        twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.
  11.   </p>
  12.   <p>
  13.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.     twas brillig and the slithy toves did gyre and gimbal in the wabe. All mimsy were the borogroves, and the mome raths outgrabe.
  14.   </p>
  15. <script type="text/javascript">
  16. jQuery('.box').css('opacity',0);
  17. jQuery('#click').click(function(){jQuery('.msg1').animate({opacity:1,left:'590',top:'90'},1500,
  18.   function(){jQuery('.msg2').delay(3000).animate({opacity:1,left:'600',top:'100'},1500,function(){jQuery('.bigdiv').hide(3000)})}
  19. )});
  20. </script>