fadeOut() one table, fadeIn() another

0
votes

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.

enter image description here

Any ideas please how to fight this?

3
jqueryfadeinfadeout
Please stop writing tags in your titles and appending thanks/signatures to posts! – Lightness Races in Orbit
A "thank you", whilst polite, is unnecessary noise. This is not a forum or chat: it is a knowledge resource. The question body should just contain the question. And I mean the tags in titles: "jQuery - title here" is redundant; we already have a consistent, indexable tagging system. – Lightness Races in Orbit
Ok, makes sense, maybe - if you provide a pointer to SO owners saying so (because I suppose you're not a SO owner). – Alexander Farber
@Alexander Farber - stackoverflow.com/faq#signatures – James Allardice
There are no "owners". This is a community, with a FAQ, guidelines, common sense and a whole lot of Asperger's! – Lightness Races in Orbit

3 Answers

4
votes

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.

2
votes

You must make a callback like this:

$('#leaders').fadeOut(function()
{
    $('#favourites').fadeIn(); // execute after fadeOut has finished
});

Other:

$('#favourites').fadeOut(function()
{
    $('#leaders').fadeIn(); // execute after fadeOut has finished
});
1
votes
$('#leaders').fadeOut("slow", function() { $('#favorites').fadeIn(); });

fadeOut takes a callback which is called when fadeout is done.