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接受在完成淡出时调用的回调。