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 is a link to my site

When I click on the services link I would Like the #slideshow div to hide, and a new div to replace it.

I had tried to just have the slideshow animate out on clicking the services link, but it would either do the animate function or go to the linked html page, not both. How would I accomplish both.

It doesn’t matter if I just hide and show divs on the same page, or if I go to a new html page. I just want to have the animate function and change the content while hiding one.

this is the jquery code I am using

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

home and services are the two links, and I would like services when clicked to hide the #slideshow div, and show the slideshow2 div, which would be hidden and then replace the first one.

there is a fair amount of html so it may be easier to view my source from the link.

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.