title: .animate() working just one time
body: <p>I have <a href="https://dl.dropboxusercontent.com/u/187738698/Temporary%20Files/costume-page.html" rel="nofollow">this site</a> (See in Full Screen).</p>
  
  <h3>Aim:</h3>
  
  <p><strong>On click of <code>"#cos_next"</code></strong>:</p>
  
  <ol>
  <li>The image <code>"#img_1"</code> should move to the left beyond the page , and the <code>"#img_2"</code> should come in from the right.</li>
  <li>The image <code>"cos_next"</code> and <code>"cos_grey_back"</code> should get removed.</li>
  <li>The image <code>"cos_pre"</code> and <code>"cos_grey__next"</code> should take their place.</li>
  </ol>
  
  <hr>
  
  <p>You understand what I am trying to do.
  However,</p>
  
  <h3>Problem:</h3>
  
  <p>After the <code>"img_1"</code> moves away and <code>"img_2"</code> comes in , but clicking the image <code>"cos_pre"</code> doesn't do anything.</p>
  
  <hr>
  
  <h2>Reference Code:</h2>
  
  <h3>code inside <code>&lt;script&gt;</code>:</h3>
  
  <pre><code>$(window).load(
                  $("html , a").on("mousedown mouseup", function (e) {
                       e.preventDefault();
                       $("html , a").toggleClass("change");
                  }
          ));
  
          //Slide in three monsters 
          $(document).ready(function () {
              $('#cos_next').click(function () {
                  $('#img_1').animate({
                      left: "-=1093px"
                  }, 1000);
                  $('#img_2').animate({
                      left:"-=1170px"
                  }, 1000);
                  $("#cos_next").fadeOut("slow").remove();
                  $("#cos_grey_back").fadeOut("slow").remove();
                  $("body").append("&lt;img src='costume-previous-button.PNG' id='cos_pre' /&gt;");
                  $("body").append("&lt;img src='costume-grey-next-button.png' id='cos_grey_next' /&gt;");
              });
          });
  
          // Slide back in the team
          $(document).ready(function () {
              $('#cos_pre').click(function () {
                  $("#img_2").animate({
                      left:"+=1093px"
                  }, 1000);
                  $("#img_1").animate({
                      left:"+=1170px"
                  }, 1000);
              });
          });
  </code></pre>
  
  <hr>
  
  <h3>Code inside <code>&lt;style&gt;</code>:</h3>
  
  <pre><code>html, a {
              cursor:url(cursor.png) 6 3 , default;
              overflow:hidden;
          }
          .change {
              cursor:url("cursor-clicked.png") 6 3 , default;
          }
          body { 
                  background: url('costume-page.png') no-repeat center center fixed;    
                  background-size:cover;  /*For covering full page*/
          }
          #cos_back{
              position:absolute;
              bottom:0.45%;
              left:0.10%;
              transition:0.5s ease;
          }
          #cos_back:hover , #cos_next:hover , #cos_pre:hover {
              -webkit-transform:scale(1.10);
              -moz-transform:scale(1.10);
              -ms-transform:scale(1.10);
              -o-transform:scale(1.10);
          }
          #cos_next {
              position:absolute;
              bottom:0.45%;
              left:51.60%;
              transition:0.5s ease;
          }
          #img_1{
              position:absolute;
              left:230px;
              top:0.3%;
          }
          #img_2 {
              position:absolute;
              left:1400px;
              top:0.3%;
          }
          #cos_pre {
              position:absolute;
              bottom:0.40%;
              left:41.00%;
              transition:0.5s ease;
          }
          #cos_grey_next {
              position:absolute;
              bottom:0.45%;
              left:51.60%;
              transition:0.5s ease;
          }
          #cos_grey_back {
              position:absolute;
              bottom:0.40%;
              left:41.00%;
              transition:0.5s ease;
          }
  </code></pre>
  
  <hr>
  
  <h3>main HTML file:</h3>
  
  <pre><code>&lt;!--Loaded from the costume button on start-menu.html . Press the back button to go back--&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Angry Birds Star Wars&lt;/title&gt;
      &lt;script src = "JQuery.js"&gt;&lt;/script&gt;
      &lt;script src = "JQueryUI.js"&gt;&lt;/script&gt;
      &lt;style&gt;..........&lt;/style&gt;
      &lt;script&gt;..........&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;img src = "costume-page-new-1.png" id="img_1" /&gt;
      &lt;img src="costume-page-new-2.PNG" id="img_2" /&gt;
      &lt;img src="costume-back-button.PNG" id="cos_back" onclick="window.location.href='start-menu.html';"/&gt;
      &lt;img src="costume-grey-back-button.png" id="cos_grey_back" /&gt;
      &lt;img src="costume-next-button.PNG" id="cos_next" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please help.
  I hope I provided all the necessary info.</p>
  
  <p>Thanks.</p>