title: JQuery Animate only works once
body: <p>Hi I am using JQuery to animate 2 div boxes on my page , This does work fine first time but subsequent times I just get visible boxes without any animation effects , The code is below which is triggered from a button called buttonx. Thanks for any help in advance </p>
  
  <pre><code>$(document).ready(function(){
     // lWhen document loaded 
  
  $("#buttonx").click(function() { DisplayUniDiv( 40,250,300 ) }); 
  $('#UniDivHead').click(function() { CloseDiv() }); 
      });
  
  
  
     function DisplayUniDiv(top,width,height,color) { 
  
  dvHead = $('#UniDivHead') ; 
  dvBody = $('#UniDivBody') ;     
  
      // Display the Div Head 
  dvHead.css("visibility", "visible");
  if (color) { color = "#" + color ; } else { color = "#0066cc"  } ;  
      dvHead.css("background", color ) ;
  dvHead.css("top", top + 'px' ); 
  dvHead.css("width", width + 'px') ;
      MarginLeft = (width / 2) ; 
      MarginLeft = "-" + MarginLeft ;     
  dvHead.css("marginLeft", MarginLeft) 
  dvHead.append("Close") ; 
  
      // Display the body 
  dvBody.css("visibility", "visible");
  dvBody.css("background", '#CCC' ) ;
      HeadHeight = dvHead.height() ; 
  dvBody.css("top", top + HeadHeight + 'px' ); 
  dvBody.css("width", width + 'px') ; 
  dvBody.css("marginLeft", MarginLeft)    
  dvBody.animate({height:height},500);
  
      }
  
      function CloseDiv() {
  dvHead = $('#UniDivHead') ; 
  dvBody = $('#UniDivBody') ;
  
  dvHead.css("visibility", "hidden");
  dvBody.css("visibility", "hidden"); 
  
       }
  </code></pre>