title: Jquery and AJAX. Putting an Ajax call between animations
body: <p>First let me tell you that I learned scripting all by myself so my approaches are sure a bit weird.
  To explain what I want to do please go to this example site I prepared: <a href="http://www.dinomuhic.com/2010/test4.php" rel="nofollow noreferrer">How it should be, kind of!</a></p>
  
  <p>You'll notice that when you press on all the links which appear after pressing "Showroom" and all other menue buttons the content of the main box is changing BEFORE the window moves down. </p>
  
  <p>Simply said: what I want to accomplish is that the window moves down with keeping it content until its gone, then when It appears from the right side it should have the new content.</p>
  
  <p>current window content: "home"
  -> Push "personal" 
  -> Window content still that of "home"
  -> Moves down
  -> Comes from right side with content from "personal"</p>
  
  <p>Here is the Javascript part of the AJAX and the animation</p>
  
  <pre><code> function createRequestObject()
   {
      var ro;
      var browser = navigator.appName;
       if(browser == "Microsoft Internet Explorer")
      {
      ro = new ActiveXObject("Microsoft.XMLHTTP");
   }
      else
      {
      ro = new XMLHttpRequest();
   }
   return ro;
  
   }
  
   var http = createRequestObject();
  
   var katcheck;
  
   function sndReq(req)
   {
  
      var req2 = req;
  
      katcheck = req.slice(0, 1);
  
      if (katcheck == "k")
      {
      var katid = req2.slice(3,4);
  
      http.open('get', 'getkat.php?kat='+katid);
      }
      else
      {
      $('#videoleft').animate({"top": "1000px"}, { queue:true, duration:600,  easing: 'easeInQuad'})
                .hide(0).animate({"top": "0px", "left": "800px"},{ queue:true, duration:1});
  
          http.open('get', 'getwork.php?id='+req);
      }
  http.onreadystatechange = handleResponse;
  http.send(null);
  }
  
  
  function handleResponse()
  {
      if(http.readyState == 4)
                      {
                     var response = http.responseText;
                      }
  
      if (katcheck == "k")
      {
                  document.getElementById("videomenue").innerHTML = response;
      }
      else
      {
          $('#videoleft').show(0).animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});
  
          document.getElementById("post").innerHTML = response;
  
      }
   }
  </code></pre>
  
  <p>Ok now I'll explain the part at the beginning of the sndReq function:</p>
  
  <p>Usually the buttons in the menue just send numbers (which are IDs in the DB) to the sndReq. For example: you press on "Showroom" then "k_01" is being send to the same sndReq function. The "k" stands for category and the script tells if its a category-request or not by slicing the string. </p>
  
  <p>I hope you understand what I mean.</p>
  
  <p>It would be great to have actually to windows, one with the old content moving down and at the same time one new window coming from the right side with the new content but when I tried to assamble it with two windows like in test3.php (same directory) I get the undefined problem. </p>
  
  <p>I hope someone can help me. Thank you very much</p>