Question

我在浏览器窗口的顶部有一个<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

您可以使用jQuery的outerHeight()获取元素的高度，并使用它来移动div。转换可以使用纯CSS完成。像这样：

$(function(){
  $("#topA").on("click", function(){
    var thisHeight = $("#topDiv").outerHeight();
    $("#topDiv").css({
      'top': '-'+thisHeight+'px'
    });
  });
});

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

<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 2

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

Answer 3

您必须使用.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.

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

3 个答案: