title: Why isn't my web page transition working? (HTML, CSS, JavaScript)
body: <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="index.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;a id="myLink" href="#"&gt;
              Click to slide in new page
      &lt;/a&gt;
  
  
  &lt;iframe id="newPage" src="http://jsfiddle.net"&gt;&lt;/iframe&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code> #myLink {
   position: absolute;
  }
  
  iframe {
  width: 100%;
  height: 100%;
  top: 100%;    
   position: fixed;
   background-color: blue;
  
  }
  </code></pre>
  
  <p>And my JavaScript: </p>
  
  <pre><code>$("#myLink").click(function () {
  $('#newPage').transition({top: '0%' });
  });
  </code></pre>
  
  <p>I am literally copy and pasting from this source <a href="http://jsfiddle.net/TheGAFF/hNYMr/" rel="nofollow">http://jsfiddle.net/TheGAFF/hNYMr/</a> to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.</p>
  
  <p>Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.</p>