title: Slide Image Up on Page Load
body: <p>I'm trying to achieve the following <a href="http://i.imgur.com/khly75f.gif" rel="nofollow">EFFECT</a> on page load. The Image starts at 0% opacity and off the page, and then it slides into position while achieving 100% opacity. I've managed to get the opacity to work but not the slide </p>
  
  <p>My code is as follows:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;head&gt;
  title&gt;Nic Brown&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'&gt;
  &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="css/styles.css" rel="stylesheet"&gt;
  &lt;link href="css/bootstrap-theme.min.css" rel="stylesheet"&gt;
  &lt;link href="css/bootstrap-theme.min.css" rel="stylesheet"&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
              window.onload = function() {
                  $('#logo').hide().fadeIn(2000);
              };
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/plugins/slideup.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-mine navbar-static-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="name"&gt;
                  &lt;a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px"&gt;NICHOLAS
                      &lt;em&gt;BROWN&lt;/em&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse navHeaderCollapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;
                          &lt;a href="about.html" style="font-family:'Roboto'; font-weight:300;"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#about" style="font-family:'Roboto'; font-weight:300;"&gt;Portfolio&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#about" style="font-family:'Roboto'; font-weight:300;"&gt;Social&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#about" style="font-family:'Roboto'; font-weight:300;"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="frontbg"&gt;
          &lt;img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" /&gt;
      &lt;/div&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.frontbg {
  width: 80%;
  height: auto;
  left: 10%;
  top: 15%;
  position: fixed;
  }
  .frontbg img {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity:0;
  -moz-transition:opacity 2s;
  -webkit-transition:opacity 2s;
  -o-transition:opacity 2s;
  transition:opacity 2s;
  }
  </code></pre>
  
  <p>The Other CSS is just Bootstrap Stuff.</p>
  
  <p>Here is the attempted jQuery Slide Up</p>
  
  <pre><code> $(document).ready(function() {
            $('.frontbg').delay(3000).animate({bottom:"15%"},600);
      });
  </code></pre>
  
  <p>Your help would be much appreciated. The website can be viewed online <a href="http://nicbrwn.com/beta" rel="nofollow">HERE</a></p>