fadeOut() 一张表，fadeIn() 另一张表

Question

可能是一个非常基本的问题 -

我有 2 个表 #favorites 和 #leaders，每个表的底行都有一个按钮。

当我单击按钮时，我只想显示其中一个表。

所以我正在尝试以下方法，它有点有效：

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

但它同时发生，这看起来很尴尬。

在开始 fadeIn() 之前，如何等待 fadeOut() 完成？

更新：

我已将代码更改为

<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 接受一个回调，当淡出完成时调用该回调。