Geek asks and answers

JQuery delay between animations

I have two elements that should not be active at the same time, so when one switches, I disappear, but I would like to fade out the open element, and then bring the other. Is there a way to do this that is not 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>

This is my current script.

0
source share
1 answer

Take a look at using the callback mechanism for fadeOut so you can link the animation. The animation method callback is called after the previous animation has completed.

 <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>
+2
source

More articles:


All Articles