jquery - 将固定的 div 向上滑动并离开屏幕

Question

我有一个 HTML <div id="topDiv">那是 position:fixed到浏览器窗口的顶部。

如果我运行 $("#topDiv").slideUp(); <div>消失了，但是 <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.

Answer 1

.animate() 方法可以让它工作

http://api.jquery.com/animate/

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

#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.