title: How to make a picture fly in and out on transitions with jquery
body: <p>Hi i have started making this web. </p>
  
  <p><img src="https://i.stack.imgur.com/UbFez.jpg" alt="enter image description here"></p>
  
  <p>I am desperately trying to make my menus to fly-in and out on transitions. I want my menus to fly-in in a certain order starting from top to bottom. </p>
  
  <p>I have updated this question from its original. </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="flyin"&gt;
  &lt;form action="WoodEnglish.html" method="get"&gt;   
                  &lt;input id="Wood" type="image" src="Wood.png" alt="Submit" &gt; 
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function () {
    var currWidth = $(window).width();
    console.log(currWidth);
  
    var startPos = -1;
    var endPos = 1000;
    console.log(endPos);
  
    $('#flyin').animate({left: endPos},1000);
  
    $('#Wood, #submit2').click(function () {
          if (this.id == 'Wood') {
              $('#flyin').animate({left: endPos}, 1000);  
          }
          else if (this.id == 'submit1') {
              alert('Submit 2 clicked');
          }
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However there is still two problems with this code </p>
  
  <ol>
  <li><p>is this; var currWidth = $(window).width(); i think. I need my buttons to fly into the screen from out of screen and atm i am not allowed to do that. </p></li>
  <li><p>atm it doesn't wait until the animation is complete before loading the next html on action form. </p></li>
  </ol>
  
  <p>thx in advance for any contributions</p>