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 type="text/javascript">
    $(function() {
        $('#jlogin').click(function() {
           $('#reg').fadeOut('fast', function() {
               $('#login').toggle('fast');
           });
        });
        $('#jreg').click(function() {
            $('#login').fadeOut( 'fast', function() {
                $('#reg').toggle('fast');
            });
        });
     });
</script>