Jquery animate hide and show

Question

I would like to have two things happen at once when I click on a link. I am slowly going through Jquery documentation, but have yet to learn what I need yet.

Here i

Answer 1

Updated: This solution was updated following a follow-up question in the comments.

You should use the callback method of the show/hide methods.

$("a").click(function(){

  /* Hide First Div */
  $("#div1").hide("slow", function(){
    /* Replace First Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* Hide Second Div */
  $("#div2").hide("slow", function(){
    /* Replace Second Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* If you wanted to sequence these events, and only
     hide/replace the second once the first has finished,
     you would take the second hide/replace code-block 
     and run it within the callback method of the first
     hide/replace codeblock. */

});

The callback method is the second parameter of the .show/.hide functions. It is ran whenever the .show/.hide method is completed. Therefore, you can close/open your box, and within the callback method run an event immediately afterwards.