将div滑入和滑出视口

Question

I'm trying to achieve an effect similar to airbnb.com's home page and the how it works button.

I've been able to do the following fiddle: http://jsfiddle.net/n89z4bz3/

However, I'm unable to achieve the slide effect as well as fixing the visible container to the bottom of the slid in upper-container .

My Jquery code is here:

$(document).ready(function(){
    var heightVar = 0 - $(window).height();
    $('.upper-container').css('top',heightVar+'px');
    $('.main-container').css('height', $(window).height()+'px');
    $('.click-this').on('click', function(){
        $('.upper-container').css('top', '0');
        $('.main-container').css('margin-top',$('.upper-container').height()+'px');
    });
});

My HTML is setup as follows:

<div class="upper-container">
    Hidden container
</div>
<div class="main-container">
    Visibile container
    <div class="click-this">
        Click This to Slide Down
    </div>
</div>

Answer 1

Try this

http://jsfiddle.net/n89z4bz3/1/

 $(document).ready(function() { var heightVar = 0 - $(window).height(); $('.main-container').css('height', $(window).height() + 'px'); $('.click-this').on('click', function() { $('.upper-container').animate({ height: '100px', paddingTop: '40px' }, 500); }); }); 

 .upper-container { position: reltive; width: 100%; padding-top: 0px; background: red; height: 0px; overflow: hidden; } .main-container { background: blue; position: relative; } .click-this { background: #fff; color: #333; padding: 20px; margin-left: 20px; width: 300px; margin-top: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="upper-container"> Hidden container </div> <div class="main-container"> Visibile container <div class="click-this"> Click This to Slide Down </div> </div>