title: Javascript slide in slide out div
body: <p>I'm trying to create a replica of this site:</p>
  
  <p><a href="http://liko0312.wix.com/wildfireimages" rel="nofollow">http://liko0312.wix.com/wildfireimages</a></p>
  
  <p>I've made it to slide in and out from the same direction using CSS and placing the div outside with 100% and then bringing it in with 0, very much a toggle effect.</p>
  
  <p>However, I'm trying to make the pages slide in and out just like in the model site but CSS does not allow me to. I have good skills with HTML/CSS but am low on Javascript. So far I found <a href="http://jsfiddle.net/jPneT/208/" rel="nofollow">this fiddle</a>, but it's a toggle animation while I need it to slide in from the right and slide out to the left and after it has to reset. Also, the animation of the current div sliding out and the next div sliding in have to be in the same time.</p>
  
  <p>Here is <a href="http://jsfiddle.net/5EaP8/" rel="nofollow">Fiddle with code</a> as requested</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel{
      width:0px;
      height:0px;
      overflow: hidden;
   position:relative;
      left:100%;
      background: none;
      z-index: 2;
   -moz-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
      -webkit-transition: all .8s ease-in-out, width 0s ease 1s, border-width 0s ease 1s;
   -o-transition: all .8s ease-in-out,  width 0s ease 1s, border-width 0s ease 1s;
   transition: all .8s ease;
   transition-delay:0s;
   margin:0px;
   
  }
  
  .panel:target{
   width:100%;
   height:auto;
      margin:0px 0 0;
   padding:0;
      background-color: transparent;
   position:relative;
   left:0;
   z-index:3;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="overall-wrap"&gt;
  &lt;!-- Header with Navigation --&gt;
  
   &lt;div id="header"&gt;
      &lt;a href="#home"&gt;&lt;img class="header" src="images/logo.png" width="133" height="86" alt="Wildfire Images"&gt;&lt;/a&gt;
      &lt;nav&gt;
      &lt;ul id="navigation"&gt;
          &lt;li&gt;&lt;a class="scroll" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="scroll" href="#about"&gt;About Us&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a class="scroll" href="#contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
   
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
    
  
        &lt;div id="home" class="panel"&gt;&lt;/div&gt;
  
  &lt;!-- About Us --&gt;
   
        &lt;div id="about" class="panel"&gt;
            &lt;div class="content"&gt;
                &lt;div class="bg-about effect2"&gt;
                &lt;div class="about-wrapper"&gt;
                  &lt;div class="about-text"&gt;
                  &lt;h2&gt; About Us&lt;/h2&gt;
                  &lt;p&gt;Wildfire Images is a Sydney based boutique Portrait Photography Studio dedicated to candidly capturing all that is beautiful, fun and elegant about you and your loved ones.&lt;/p&gt;
                  &lt;p&gt;At Wildfire Images, we tailor every shoot to you, your trade mark smile, your rapturous laugh, your devotion to those you love, the cheeky, the serious and all those gorgeous things in between that will always be unmistakably you.&lt;/p&gt;
                  &lt;p&gt;Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.&lt;/p&gt;
                  &lt;p class="strong"&gt;Contact us today on 9150 6275.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="about-image"&gt;&lt;img src="images/aboutme.jpg" width="200" height="300" alt="WildFire Studios"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- ... --&gt;
            &lt;/div&gt;
            &lt;div class="clearfix"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
  &lt;!-- /About Us --&gt;
  
  &lt;!-- Contact --&gt;
  
  &lt;div id="contact" class="panel"&gt;
      &lt;div class="content"&gt;
          &lt;div class="bg-contact effect2"&gt;
          &lt;img src="images/contact-image.jpg" width="900" height="419" alt="Contact Wildfire"/&gt;
          
         &lt;div id="form-wrapper"&gt;
           &lt;div id="form-outer"&gt;
           &lt;div id="text-wrap"&gt;
             &lt;div id="contact-left"&gt;
             &lt;h2&gt;Contact&lt;/h2&gt;
             &lt;div id="phone"&gt;
             &lt;h3&gt;Phone&lt;/h3&gt;&lt;p&gt;9150 6275&lt;/p&gt;&lt;/div&gt;
             &lt;div id="email"&gt;
             &lt;h3&gt;Email&lt;/h3&gt;&lt;p&gt;info@wildfireimages.com.au&lt;p&gt;&lt;/div&gt;
  &lt;/div&gt;
             &lt;div id="contact-right"&gt;&lt;h3&gt;Address&lt;/h3&gt;&lt;p&gt;Studio 18,&lt;/p&gt;&lt;p&gt;442-444 King Georges Rd&lt;/p&gt;&lt;p&gt;BEVERLY HILLS NSW 2209&lt;/p&gt;&lt;/div&gt;
             &lt;/div&gt;
             &lt;div class="clear"&gt;&lt;/div&gt;
             &lt;div id="form-inner"&gt;
             &lt;form name="contact" action="contact.php" method="post" onBlur="MM_validateForm('name','','R','email','','RisEmail','subject','','R','message','','R');return document.MM_returnValue"&gt;
               &lt;input name="name" type="text" class="field" id="name" placeholder="Name"/&gt;
               &lt;input name="email" type="email" class="field" id="email" placeholder="Email"/&gt;
               &lt;input name="subject" type="text" class="field" id="subject" placeholder="Subject" /&gt;
               &lt;textarea name="message" class="field_textarea" id="message" placeholder="Message"&gt;&lt;/textarea&gt;
               &lt;input type="submit" value="Send" name="submit" class="submit"/&gt;
             &lt;/form&gt;
             &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
            
          &lt;/div&gt;
          &lt;!-- ... --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Contact --&gt;
  
  &lt;!-- Portraits --&gt;
  &lt;div id="portraits" class="panel"&gt;
      &lt;div class="content"&gt;
         &lt;div class="gallery-big effect2"&gt;
         &lt;div id="gallery-big-text-wrap"&gt;
             &lt;h2&gt;Portraits&lt;/h2&gt;
             &lt;p&gt;Call us to start the story. You bring the characters and the stories and we'll take the photos that tell them.&lt;/p&gt;
             &lt;p&gt;Contact us today on 9150 6275.&lt;/p&gt;
             &lt;/div&gt;  
            &lt;!--k gallery start--&gt;
            &lt;img src="images/baby-06-portrait-gallery.jpg" width="798" height="531"&gt;
             &lt;img src="k/ki_galleries/all-about-me/AEP_0486.jpg" width="798" height="1200"&gt;
            &lt;img src="k/ki_galleries/all-about-me/AEP_0653.jpg" width="798" height="1200"&gt;
            &lt;img src="k/ki_galleries/all-about-me/DSC_0548.jpg" width="799" height="1200"&gt;
            &lt;img src="k/ki_galleries/all-about-me/DSC_2652-edit.jpg" width="799" height="1200"&gt;
            &lt;img src="images/family.jpg" width="798" height="532"&gt;
            &lt;img src="k/ki_galleries/all-about-me/DSC_4052.jpg" width="799" height="1200"&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Portraits --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, the new site can be seen at wixwebsite.seobrasov.com</p>
  
  <p>Please note that the slide in and out should work for more than two divs and be able to jump from tiv 1 to div 3 without showing div 2.</p>