当我隐藏一些div元素，并在其他地方淡化其他div元素时，淡入淡出的div似乎“跳”？

Question

我所说的动作可以是recreated here。

使用搜索栏搜索视频，然后点击下方的Play按钮。你会看到玩家“跳起来”收集它的位置。

如何解决该行为，使其在该位置平滑淡入？

以下是为执行切换而运行的代码：

    /*The elements that get hidden are below*/
    $("#playlist").css('display','none');
    $("#button_control").hide();
    $("#search-group").hide();
    $("#playlist_container").hide();

    /*The element that becomes visible (AND JUMPS!) below*/
    $("#player-list_container").fadeIn(1000);

Answer 1

尝试使用CSS'visibility' - 'hidden'，而不是'display' - 'none'来使该元素不可见。它会使该元素不可见，但元素将保留在它的位置。

Answer 2

尝试添加延迟，以便其他元素有时间摆脱困境，从而出现在正确的位置。

$("#player-list_container").delay(1000).fadeIn(1000);