使用Jquery将元素动画制作到窗口的右边缘

我正在尝试使用Jquery为窗口右侧的div设置动画。我还使用Jquery UI来更改div的颜色。我还在整个窗口中设置div的动画。不过，我只是在试验jquery动画，没有什么关键的。无论如何，这就是我迄今为止的代码：

HTML:

   <div id="box1"></div>
    <button type="button" id="btn"> Click Me! </button>

CSS：

        #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;
        }   

JQuery：

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;
  }
}

});

顶部的第一个变量是在两个不同的动画序列之间切换。下一步是确保动画不会被错误地触发两次。我试图一直向右移动的元素是#box1，我希望它在第一个序列的末尾这样做！

谢谢你的帮助！