Question

我正在尝试使用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，我希望它在第一个序列结束时这样做！

感谢您的帮助！

Answer 1

您可以使用2个选项让框动画到区域的右边缘。

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

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

left：（$（document）.outerWidth（） - $（'＃box1'）。outerWidth（））

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

HTML：

CSS：

JQuery的：

1 个答案: