jQuery Slide显示过渡完成前的空白

用户名

我正在尝试创建幻灯片动画，以便在单击链接时隐藏当前的div并显示隐藏的div。似乎工作正常，但是在完成幻灯片效果之前，会出现空白。我如何避免出现这样的空白，以便新的div产生错觉，而又不改变当前div的位置。

$(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>

用户名

一种方法是从文档流中删除它（通过position: absolute，虽然fixed也可以），然后为其rightCSS属性设置动画，如下所示（有关更多说明，请参见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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。