javascript - jQuery Slide 在转换完成之前显示空白

Question

我正在尝试创建一个幻灯片动画，以便在单击链接时隐藏当前的 div 而显示隐藏的 div。它似乎工作正常但是在幻灯片效果完成之前，会出现一个空白区域。我怎样才能避免这个空白，使得新的 div 在不改变当前 div 的位置的情况下给人一种滑动的错觉。

Fiddle:

$(document).ready(function() {
  $(".c-f").click(function() {
    $("#home-intro").hide();
    $("#cf-intro").show("slide", {
      direction: "right"
    }, "slow");
  });
});

.left {
  width: 50%;
  background: red;
  float: left;
  height: 90vh;
}

.right {
  width: 50%;
  background: green;
  float: right;
  height: 90vh;
}

.blue {
  width: 50%;
  background: blue !important;
  float: right;
  height: 90vh;
}

#cf-intro {
  background: blue;
  display: none;
  height: 90vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="home-intro">
  <div class="left">
    some text
  </div>
  <div class="right">
    <a class="c-f" href="#">Some Link</a>
  </div>
</div>
<div id="cf-intro">
  <div class="left">
    some text more
  </div>
  <div class="right blue">
    Some even more text
  </div>
</div>

Answer 1

一种方法是将其从文档流中移除(通过 position: absolute，尽管 fixed 也可以)然后为其 right 设置动画CSS 属性，就像这样(请参阅 JavaScript 注释以获取更多解释):

$(document).ready(function() {
    $(".c-f").click(function() {
        // set here and used by both functions to ensure the speed is always the same
        var animSpeed = "slow";

        // remove from document flow by setting "position: absolute"
        // (and ensure width is still 100%)
        $("#home-intro").css({
            position: "absolute",
            width: "100%"
        }).animate({
            // "push" it from the right
            right: "100%"
        }, animSpeed, function() {
            // hide once it's finished animating
            $(this).hide();
        });

        $("#cf-intro").show("slide", {
            direction: "right"
        }, animSpeed);
    });
});

.left {
  width: 50%;
  background: red;
  float: left;
  height: 90vh;
}

.right {
  width: 50%;
  background: green;
  float: right;
  height: 90vh;
}

.blue {
  width: 50%;
  background: blue !important;
  float: right;
  height: 90vh;
}

#cf-intro {
  background: blue;
  display: none;
  height: 90vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="home-intro">
  <div class="left">
    some text
  </div>
  <div class="right">
    <a class="c-f" href="#">Some Link</a>
  </div>
</div>
<div id="cf-intro">
  <div class="left">
    some text more
  </div>
  <div class="right blue">
    Some even more text
  </div>
</div>