jQuery delay between animations

Question

I have two elements that shouldn't be active at the same time, so when one is toggled I fade the other out, however I would like to be able to fade the open element out and then bring the other one in. Is there a way to do this that isn't a hack?

<script ="text/javascript">

$(function() {
 $('#jlogin').click(function() {
  $('#login').toggle('fast');
  $('#reg').fadeOut('fast');
 });

 $('#jreg').click(function() {
  $('#reg').toggle('fast');
  $('#login').fadeOut('fast');
 });
});

</script>

That is my current script.

Answer 1

Look at using the callback mechanism for fadeOut so you can chain the animations. The callback on the animation methods are called after the previous animation is complete.

 <script ="text/javascript">
    $(function() {
        $('#jlogin').click(function() {
           $('#reg').fadeOut('fast', function() {
               $('#login').toggle('fast');
           });
        });
        $('#jreg').click(function() {
            $('#login').fadeOut( 'fast', function() {
                $('#reg).toggle('fast');
            });
        });
     });
</script>

Answer 2

Thanks tvanfosson for you your 'chaining' demonstration. Great!