title: Fade in hidden element from bottom to top
body: <p>I have a page where I have an section <code>main-section</code> that with the top bar takes 100% height of the screen.
  Since my <code>top-bar</code> is <code>77px</code> high it is set up like this in css:</p>
  
  <pre><code>#app {
    position: relative;
    height: 100%;
    width: 100%;
    background-image: url('/img/cover.png');
    background-size: cover;
  }
  
  #main-section {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
  }
  
  #magazine-detail {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
  }
  </code></pre>
  
  <p>This is how it looks in the html:</p>
  
  <pre><code>&lt;div id="app"&gt;
  
      @section('topBar')
        @include('customer.layouts.partials.top-bar')
      @show
  
      &lt;div id="main-section"&gt;
        @section('header')
          @include('customer.layouts.partials.header')
        @show
  
        @section('carousel')
          @include('customer.layouts.partials.carousel')
        @show
      &lt;/div&gt;
  
      &lt;div id="magazine-detail"&gt;
        @section('magazine-detail')
          @include('customer.layouts.partials.magazine-detail')
        @show
      &lt;/div&gt;
  
      &lt;div class="large-10 large-centered columns content"&gt;
        @yield('content')
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Initially the <code>main-section</code> is visible and <code>magazine-detail</code> is hidden. On click of a button magazine-detail takes up the space of main section. I did that with fadeIn, fadeOut of each of the sections like this in my js. file:</p>
  
  <pre><code>$('#magazine-detail').fadeIn(2000);
  $('#main-section').fadeOut(2000);
  </code></pre>
  
  <p>I wonder how can I make it fadeIn, so that it appears that it comes from bottom to top, like a drawer kind of effect?</p>