Javascript 使用Jquery将元素设置为窗口右边缘的动画？

我正在尝试使用Jquery为窗口右侧的div设置动画。我还使用jqueryui来更改div的颜色。我还在整个窗口中设置div的动画。不过，我只是在尝试jquery动画，没有什么重要的。这是我迄今为止的代码：

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

---

谢谢你的帮助

有两个选项可以使长方体在区域的右边缘设置动画

1） 您可以将css设置为“left:auto”，并将css设置为“right:0”。要做到这一点，您需要采取一些额外的步骤。您需要将css“position:absolute”设置为框，并且需要将框包装在一个div中，该div具有宽度为100%的css“position:relative”。通过这种方式，长方体知道右边缘的位置，因为它最直接的父级css“position:relative”正在设置边界。执行此选项需要进行一些微调，因为在设置左位置和右位置动画之间切换会导致一些跳跃

2） 使用此选项可以继续设置左侧位置的动画，但要使其向右设置动画，需要jquery计算页面的宽度，并用框的宽度减去。它看起来是这样的：

左：（$（文档）.outerWidth（）-$（'#box1'）.outerWidth（））

   <div id="box1"></div>

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

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

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;

  }
}



});