title: Jquery Fade in and Slide Down Title
body: <p>I am trying to get the h1 element of my webpage to slide down from the top and fade in at the same time. Ive tried using animation and it hasnt worked. The effect I am going for is similar to the effect on this apple page. "Thin. Light. Epic." Notice the effect <a href="http://www.apple.com/ipad-pro/" rel="nofollow">http://www.apple.com/ipad-pro/</a>
  Right now, it fades in as I would like it, but it does not slide down from the top at all. </p>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready(function doBoth() {
     "use strict";
     $('h1').hide().slideDown(1000).fadeIn(1000);
  
     $('a').hide().slideDown(1000).fadeIn(2500);
   });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
  
          &lt;h1&gt;Photography 101&lt;/h1&gt;
          &lt;a href = "#"&gt;Enter&lt;/a&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.jumbotron .container {
    position: absolute;
    top: 5px;
    left: 440px;
    text-align:center;
  
  }
  
  .jumbotron h1 {
    color: #000000;
    font-size: 66px;  
    font-family: 'Helvetica', sans-serif;
    font-weight: lighter;
    font-style: oblique;
    text-align:center;
  
  
  }
  
  .jumbotron a {
      top:10px;
      font-size: 35px;
      font-style: oblique;
      font-weight: lighter;
      color: #000000;
  
  }
  </code></pre>