Question

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

$(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"); 

     }

Answer 1

because in close function, you just hide the element (here: dvBody.css("visibility", "hidden"); ) , but you should set its height to 0. like:

dvBody.css({"visibility":"hidden", height:0});