title: Executing an animation before loading a link
body: <p>EDIT: THE CODE PROVIDED IS FULLY FUNCTIONAL RIGHT NOW</p>
  
  <p>I am trying to have a specific transition but can not seem to find a proper way to do it. Please take a look at the screenshot first. I want the logo in the middle(which is a link img) (which is a crappy placeholder for now) to get bigger to cover the whole screen in black when clicked and fade into another page. My page keeps insisting on loading the new page when the link is clicked instead of making the logo bigger or compiling any other transition. I have searched but all the things on internet leads to a framework which I do not want to use. Is this possible to w/o a framework or am I sentenced to using it.</p>
  
  <p>tl;dr: I want a transition to happen onclick and then load the new page</p>
  
  <p>Code is provided below although it is just a few lines.
  Thank you all 
  (If any of you had done something similar I would prefer general pseudo-code or ideas rather than the direct answer, want to try to figure it out with some help first)
  HTML for initial page:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="homepage.css"&gt;
    &lt;script src="homepage.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;video autoplay muted loop  id="bgvid"&gt;
         &lt;source src="tbdb.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
          &lt;img id="logo" src="logoexample.png" height="500px" width="500px" class="centered"/&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JQUERY for initial page:</p>
  
  <pre><code>     $(document).ready(function() {
          $("#logo").click(function() {
             $(this).animate({
               height: '10000%',
               width: '10000%'
             }, 2000, function() {
                window.location = "questioninital.html";
             });
              });
               });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/qPLTL.jpg" alt="screenshot from the initial page"></p>