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/