jquery - 将固定div向上滑动并移出屏幕

我有一个HTML<div id="topDiv">在浏览器窗口的顶部。
如果我运行position:fixed则$("#topDiv").slideUp();将消失，但<div>的内容将从下向上隐藏，这意味着在动画过程中内容将保持完全静止。
使用jQuery，有没有办法“隐藏”这个<div>，使整个东西看起来像是从窗口上滑下，而不是被隐藏？
以下面的片段为例来说明我的意思。。。

$(function(){
  $("#topA").on("click", function(){
    $("#topDiv").slideUp("slow");
  });
});

#topDiv {
  position:fixed;
  top:0;
  left:0;
  right:0;
  background-color:#fa8072;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topDiv">This content will disappear when <a id="topA" href="#">this is clicked</a><br/>The text will disappear as the bottom edge of the box moves up.<br/>But the text itself will stay completely static while that happens.</div>
What I would like is for the contents of &lt;div id="topDiv"&gt; to slide up, giving the impression that it is leaving the screen, rather than being hidden.

最佳答案

必须使用.animate（）方法，而不是.slideUp（）。不使用像素，使用百分比。

$(function(){
  $("#topA").on("click", function(){
    $("#topDiv").animate({top: '-=100%'})
  });
});

当然，您必须使用以下命令而不是.slideDown（）：

$(function(){
  $("#topA").on("click", function(){
    $("#topDiv").animate({top: 0})
  });
});

但为了获得最佳性能，我建议您使用此解决方案，因为transform: translate是硬件加速的，所以您将获得最流畅的动画：

$(function(){
  $("#topA").on("click", function(){
    $("#topDiv").toggleClass('hide')
  });
});

#topDiv {
  position:fixed;
  top:0;
  left:0;
  right:0;
  background-color:#fa8072;
  transition: all 0.4s;
}
.hide {
  transform: translateY(-100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="topDiv">This content will disappear when <a id="topA" href="#">this is clicked</a><br/>The text will disappear as the bottom edge of the box moves up.<br/>But the text itself will stay completely static while that happens.</div>
What I would like is for the contents of &lt;div id="topDiv"&gt; to slide up, giving the impression that it is leaving the screen, rather than being hidden.

关于jquery - 将固定div向上滑动并移出屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47183364/