fadeOut() 一个表，fadeIn() 另一个答案

【问题标题】：fadeOut() one table, fadeIn() anotherfadeOut() 一个表，fadeIn() 另一个
【发布时间】：2011-07-08 19:50:11
【问题描述】：

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

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

现在效果更好了，但是有一个新问题，当点击按钮时：

当一个表格（在下面的屏幕截图中为灰色）消失时，滚动条会向上跳跃。然后出现另一个表格，但它不再可见 - 您必须手动向下滚动。

有什么想法可以解决这个问题吗？

【问题讨论】：

请停止在您的标题中写标签和在帖子中添加感谢/签名！
一句“谢谢”虽然礼貌，但却是不必要的噪音。这不是论坛或聊天：它是知识资源。问题正文应该只包含问题。我的意思是标题中的标签：“jQuery - title here”是多余的；我们已经有了一个一致的、可索引的标签系统。
好吧，有道理，也许 - 如果你提供一个指向 SO 所有者的指针这么说（因为我想你不是 SO 所有者）。
@Alexander Farber - stackoverflow.com/faq#signatures
没有“所有者”。这是一个社区，有常见问题解答、指南、常识和大量阿斯伯格综合症！

标签： jquery fadein fadeout

【解决方案1】：

您可以向fadeOut 提供回调函数，并在回调中调用fadeIn。回调函数在fadeOut完成时执行：

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

请参阅jQuery API 了解更多信息。

更新（基于更新的问题）

滚动问题的潜在解决方案：

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

这将导致文档自动滚动到刚刚淡入的元素的顶部。

【讨论】：

谢谢，但是有什么改进滚动的想法吗？ - 请查看更新后的问题
@Alexander - 查看我的更新。这会起作用，但它会有点“跳”到正确的位置。不过，如果您愿意，也可以为滚动设置动画。
谢谢！（不确定我是否可以写这个 ;-)
@Alexander：评论不同。 :)

【解决方案2】：

你必须像这样进行回调：

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

其他：

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

【讨论】：

【解决方案3】：

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

fadeOut 接受一个在淡出完成时调用的回调。

【讨论】：