title: Animate Element to right edge of the window using Jquery?
body: <p>I am trying to animate a div to the right of the window using Jquery. I am also using Jquery UI to change the color of the div. I am animating the div all over the window as well. I am just experimenting with jquery animations though, nothing critical. Any ways this is the code I have so far:</p>
  
  <h2>HTML:</h2>
  
  <pre><code>   &lt;div id="box1"&gt;&lt;/div&gt;
  
      &lt;button type="button" id="btn"&gt; Click Me! &lt;/button&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>        #box1{
  
              width: 200px;
              height: 200px;
              background-color: red;
              border: 0px solid black;
              border-radius: 0px;
              position: relative;
  
          }
  
          #btn{
              position: fixed;
              top: 600px;
              display: table-cell;
              font-size: 30px;
          }   
  </code></pre>
  
  <h2>JQuery:</h2>
  
  <pre><code>var allow = true;
  
  var animating = false;
  
  $("#btn").click(function(){
  
  
  
      if(allow == true){
  
  
          if(!animating){
  
            animating = true;
  
            $("#btn").hide();
  
  
  
            $("#box1").animate({backgroundColor: "yellow", borderWidth: "5px"}, 1000, "linear").animate({left: "500px"}, 1000).animate({top: "500px"}, 1000);
            $("#box1").animate({left: "1000px", top: "0px"}, 1000).animate({left: "500px"}, 1000).animate({top: "500px"}, 1000, function(){
              allow =  false;
              animating = false;
              $("#btn").show().text("Click Me Aagain!");
  
          });
  
        }
  
    } else {
  
     if(!animating){
        $("#btn").hide();
        animating = true;
        $("#box1").animate({top: 0}, 1000).animate({left: 0}, 1500).animate({backgroundColor: "red", borderRadius: 0, borderWidth: 0, width: "100px", height: "100px"}, 1000, function(){
  
           $("#btn").show().text("Start Over!");
  
       });
  
  
        animating = false;
        allow = true;
  
    }
  }
  
  
  
  });
  </code></pre>
  
  <p>The first variable at the top is to toggle between two different animation sequences. The next is to ensure that the animations are not triggered twice by mistake. The element I am trying to move all the way to the right is #box1 and I want it to do so at the end of the first sequence!</p>
  
  <p>Thanks for your help!</p>