title: CSS/JavaScript slide DIV out and slide DIV in
body: <p>I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the <strong>same time</strong>.</p>
  
  <p>My HTML code is like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div id="page1"&gt;
              &lt;!-- Content Area 1 --&gt;
          &lt;/div&gt;
          &lt;div id="page2"&gt;
              &lt;!-- Content Area 1 --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Currently I am using</p>
  
  <pre><code>document.getElementById('page1').style.display = "none";
  document.getElementById('page2').style.display = "inline";
  </code></pre>
  
  <p>to switch between the pages, but I would like to have the transition as smooth as possible.</p>
  
  <p>Is there a way I can do this, without jQuery and preferably just in CSS?<br>
  If not, how can I do it in jQuery?</p>