Question

我正在使用jQuery .fadeOut在“混乱”视图和“极简主义”视图之间切换。

当您点击“查看视图”按钮时，它会删除大量杂乱的信息，以便您可以专注于视频（将在后台播放，目前已关闭）。

我的问题是剩下的元素保持不变，然后当其他元素完全消失时，它们会“跳”起来，看起来有点难看。

有没有办法让这些现有元素优雅地转换到新的位置，而不仅仅是“跳跃”？

请参阅此网站并在“信息视图”和“视频视图”之间切换 http://fh80.student.eda.kent.ac.uk/fyp/

以下是代码：

<script>
/* Video view */

// With the element initially shown, we can hide it slowly:
$( ".switchViewHide" ).click(function() {
    $( ".topTitles h2" ).fadeOut("slow");
    $(".topControls h3").fadeOut("slow");
    // $(".topControls h3").fadeOut("slow"); // duplicate
    $("#videoControls p").fadeOut("slow");
    $("#pageControls div.switchViewHide").fadeOut("slow");
    $("#pageControls div.switchViewShow").fadeIn("slow");
    $("#countdownBar").fadeOut("slow");
    $("#grid").fadeOut("slow");
    $("body").addClass('videoView')
});

/* Info view */

// With the element initially shown, we can hide it slowly:
$( ".switchViewShow" ).click(function() {
  $( ".topTitles h2" ).fadeIn( "slow");
  $(".topControls h3").fadeIn("slow");
  $(".topControls h3").fadeIn("slow");
  $("#videoControls p").fadeIn("slow");
  $("#countdownBar").fadeIn("slow");
  $("#grid").fadeIn("slow");
  $("#pageControls div.switchViewHide").fadeIn("slow");
  $("#pageControls div.switchViewShow").fadeOut("slow");
});
</script>

Answer 1

当剩下的转换发生时，你有没有理由不能让.wrapper-dropdown-1和.loginbox分别向上和向下改变位置？例如。对于向上（在最小视图中），它将类似于：

$( ".switchViewShow" ).click(function() {
......(other existing code).....
$('.wrapper-dropdown-1, .loginbox').animate({
      top: '-=120'
    }, 1000);
}

.fadeOut上其他元素的平滑过渡

1 个答案: