title: Trying to create a jquery/javascript function to switch displayed div, glitches when switching backwards
body: <p>So in the html I am using bootstrap's jumbotron styled divs. A page is displayed then when you click a button an Onclick action calls the function <code>flipPage({switch from page #},{switch to page #})</code>, and then theres the <code>flipBack({switch from page #},{switch to page #})</code>.</p>
  
  <p>My problem is the animation gets screwed up , it'll repeat or switch to the wrong page and I don't know enough about jQuery animation to see if I'm doing something wrong. any tips or help would be much appreciated! I believe it is calling the wrong function? is that possible? It might be switching up the buttons?</p>
  
  <p>For the error if you get the code running it, usually occurs when you go from page <code>1-&gt;2 , 2-&gt;3, 3-&gt;2, 2-&gt;1</code>. It'll load page 3 instead of going back to 1.</p>
  
  <p>Link to DropBox Full of working code : <a href="https://www.dropbox.com/sh/xtc2jj8m39k3ax3/AAApy9zwjgV5eVBPMktF_ehTa" rel="nofollow">https://www.dropbox.com/sh/xtc2jj8m39k3ax3/AAApy9zwjgV5eVBPMktF_ehTa</a></p>
  
  <p><strong>CSS: (using twitters bootstrap.css)</strong></p>
  
  <pre><code>.jumbotron.page1{
      position: absolute;
      width: 750px;
      height: 500px;
      top: 100px;
      left: 25%;
  }
  .jumbotron.page2{
      position: absolute;
      width: 750px;
      height: 500px;
      top: 100px;
      left: 150%;
  }
  .jumbotron.page3{
      position: absolute;
      width: 750px;
      height: 500px;
      top: 100px;
      left: 150%;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>   &lt;div class="container"&gt;
       &lt;div id="page1" class="jumbotron page1" style=""&gt;
           &lt;h1 style="text-align:center; width:564px"&gt;Welcome to page 3&lt;/h1&gt;
           &lt;button class="btn btn-primary" type="button"  onClick="flipPage(1,2)"&gt; Next Page&lt;/button&gt;
       &lt;/div&gt;
  
     &lt;div id="page2" class="jumbotron page2" style=""&gt;
           &lt;h1 style="text-align:center; width:564px"&gt;Welcome to page 2&lt;/h1&gt;
            &lt;button  class="btn btn-primary" type="button" onClick="flipPage(2,3)"&gt;Next Page &gt;&lt;/button&gt;
           &lt;button class="btn btn-primary" type="button"  onClick="flipBack(2,1)"&gt; Back&lt;/button&gt;
       &lt;/div&gt;
  
  
       &lt;div id="page3" class="jumbotron page3" style=""&gt;
           &lt;h1 style="text-align:center; width:564px"&gt;Welcome to page 3&lt;/h1&gt;
           &lt;button class="btn btn-primary" type="button"  onClick="flipBack(3,2)"&gt; Back&lt;/button&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript/jQuery:</strong></p>
  
  <pre><code>      $('#page2').hide();
        $('#page3').hide();
  function flipPage(fromPage,toPage)
            {
  
  
                var fromPage = "#page"+ fromPage;
                var toPage = "#page"+ toPage;
              $(document).ready(function() {
              $(fromPage).click(function() {
  
                  $(fromPage).animate({left: '-150%'}, 500, function() {
                        $(fromPage).hide();   
                        $(toPage).show().animate({left: '25%'},200, function(){
                           });
                        });
                  });
  
               });
             }
  
         function flipBack(fromPage,toPage)
            {
  
                var fromPage = "#page"+ fromPage;
                var toPage = "#page"+ toPage;
              $(document).ready(function() {
              $(fromPage).click(function() {
                  $(fromPage).animate({left: '150%'}, 500, function() {
                        $(fromPage).hide();  
                        $(toPage).show().animate({left: '25%'},200, function(){
                        });;
                   });
              });
  
           });
  
           }
  </code></pre>