show hide multiple divs with effects

Question

This should be fairly simple. I have one div I am using to show/hide other divs.

On click I want the div that is showing to fade out and the div that is replacing it to pulsate in.

<script>
$(function () {
$(".clicky").click(function () {
    var content_id = $(this).attr('href');
    $('#content').fadeOut(2000).html($(content_id).html()).show("pulsate");;
    return false;
});
});
</script>

Problem is on click this code shows the replacing div first and then also pulsates it in. So it appears before you see the effect. Theres probably a better way to write the code altogether. Any ideas? Thanks.

Answer 1

Try this:

<script>
  $(function () {
    $(".clicky").click(function () {
      var content_id = $(this).attr('href');
      $('#content').fadeOut(2000, function(){
        $(this).html($(content_id).html()).show("pulsate");
      });
      return false;
    });
  });
</script>

The problem you are having is that you aren't waiting for the fadeOut to finish before you start switching out the content and showing the new content.