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>

小提琴

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