Question

Probably a very basic question –

I have 2 tables #favorites and #leaders, each with a button in the bottom row.

And I want to display only one of tables, when I click a button.

So I’m trying the following and it kind of works:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
        $('#favorites').hide();

        $('#show_favorites').click(function() {
                $('#leaders').fadeOut();
                $('#favorites').fadeIn();
        });

        $('#show_leaders').click(function() {
                $('#favorites').fadeOut();
                $('#leaders').fadeIn();
        });
});
</script>

but it happens at the same time, which looks awkward.

How do you wait for the fadeOut() to finish, before starting fadeIn()?

UPDATE:

I’ve change the code to

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
        $('#favorites').hide();

        $('#show_favorites').click(function() {
                $('#leaders').fadeOut("slow", function() {
                        $('#favorites').fadeIn();
                });
        });

        $('#show_leaders').click(function() {
                $('#favorites').fadeOut("slow", function() {
                        $('#leaders').fadeIn();
                });
        });
});
</script>

And now it works better, but there is a new problem, when a button is clicked:

when the one table (grey in the screenshot below) disappears, the scrollbar jumps up. And then another table appears, but it is not visible anymore – you have to scroll down manually.

Any ideas please how to fight this?

Answer 1

You can supply a callback function to fadeOut, and call fadeIn in the callback. The callback function is executed when the fadeOut is complete:

$('#leaders').fadeOut(function() {
    $('#favorites').fadeIn();
});

See the jQuery API for more info.

Update (based on updated question)

A potential solution to your scrolling problem:

$('#leaders').fadeOut(function() {
    $('#favorites').fadeIn(function() {
        window.scrollTo(0, $(this).offset().top);
    });
});

This will cause the document to scroll automatically to the top of the element that’s just faded in.