javascript - Div 从顶部滑动不滑动显示

Question

我想让一个div的内容从顶部滑下来。我尝试过的所有方法似乎都“揭示”了几乎是静态的内容。我想从屏幕边缘向下滑动并推送内容。我该怎么做？ Jsfiddle here

html

<div id="dolphin">
<div id="lizard"><img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg"></div>
</div>
<div id="content"></div>

CSS

#lizard {
padding:50px;
display:none;
}

#dolphin {
  position: fixed;
  width: 100%;
  background-color: green;
}

#content {
  height: 2000px;
}

js

$(document).ready(function(){
  $("#dolphin").click(function(){
        $("#lizard").stop().slideToggle("fast");
  });
});

Answer 1

您可以移动具有负边距的内容来创建滑动效果而不是显示效果。

这是一个非常粗略的示例，但您可以看到它最初是如何通过 margin-top: -100%; 隐藏并通过将 margin-top 设置为 来显示的>0;

$(".slide-button").click(function(){
  $(".lizard").toggleClass('slideit');
});

html, body {margin: 0; padding: 0;}
div {
  text-align: center;
}
.slide-button {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  background-color: green;
  cursor: pointer;
}
.lizard {
  width: 100%;
  padding-top: 20px;
  overflow: hidden;
  background-color: green;
  transition: all 0.5s ease;
}
.lizard img {
  margin-top: -100%;
  transition: all 0.5s ease;
  opacity: 0;
}
.lizard.slideit img {
  margin-top: 10px;
  opacity: 1;
}
.content {
  height: 1000px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button">slide it</div>
<div class="lizard">
  <img src="http://www.beardeddragon.co/image/cache/data/blackhat-500x500.jpg">
</div>
<div class="content"></div>

fiddle

https://jsfiddle.net/Hastig/qjfgsrL0/1/