fadeOut () одна таблица, fadeIn () другая

Question

Наверное, очень простой вопрос -

У меня есть 2 таблицы # избранное и # лидеров , каждая с кнопкой в ​​нижнем ряду.

И я хочу отображать только одну из таблиц, когда я нажимаю кнопку.

Итак, я пробую следующее, и это вроде работает:

<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>

но это происходит одновременно, что выглядит неловко.

Как дождаться завершения fadeOut () , прежде чем запускать fadeIn () ?

UPDATE:

Я изменил код на

<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>

И теперь это работает лучше, но при нажатии кнопки возникает новая проблема:

когда исчезает одна таблица (на скриншоте ниже), полоса прокрутки подпрыгивает вверх. Затем появляется другая таблица, но она больше не отображается - вам нужно прокрутить вниз вручную.

Есть идеи, пожалуйста, как с этим бороться?

Answer 1

Вы можете предоставить функцию обратного вызова для fadeOut и вызвать fadeIn в обратном вызове.Функция обратного вызова выполняется, когда fadeOut завершено:

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

Подробнее см. jQuery API .

Обновление (основано на обновленном вопросе)

Потенциальное решение вашей проблемы с прокруткой:

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

Это приведет к автоматической прокрутке документа до верхней части только что исчезнувшего элемента.

Answer 2

Вы должны сделать обратный вызов, как это:

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

Другое:

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

Answer 3

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

fadeOut принимает обратный вызов, который вызывается после завершения fadeout.