向上滑动使元素可见

by zicai

HTML

<div class="box">
    <div id="revealUp">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error assumenda sit non aperiam distinctio dolorum eius quis fuga obcaecati. Tenetur alias mollitia? Animi ullam voluptate molestiae est neque similique quaerat unde id iste ipsa amet ipsam dignissimos fugiat. Deserunt tenetur quo id modi omnis pariatur possimus voluptatibus a! Debitis.</p>
    </div>
</div>

CSS

.box{
    position:relative;
    height: 20px;
    background:yellow;top:50px;
}
#revealUp{
    position:absolute;
    overflow:hidden;
    /* display:none; */
    bottom:20px;
    background-color:red;
    height:0;
}

JavaScript

$(document).ready(function(){
    $('.box').click(function(){
        
        var $box=$('#revealUp');
        console.log($box.height());
        if($box.height()>0){
            $box.animate({height:0});
        }else{
            $box.animate({height:'100%'});
        }
    })
})