Question

我真的不知道动画有什么问题，它只是动画，因为我试图检查的其他所有效果都很有效：

$(document).ready(function(){
  $("button").click(function(){
    $("#box1").animate({left: '250px'});
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>Title</title>
    <style>
      .box{
        border: 2px solid black;
        width:100px;
        height: 100px;
        display: inline-block;
        padding: 20px;
        margin: 5px;
      }

      p{
        font-family: Arial;
        color: aquamarine;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1 id="he"><center>New website</center></h1>
    <p id="pp">Hey what's up?</p>
    <button id="butt">click here</button>
    <div id="box1" class="box">box9</div>

  </body>
</html>

Answer 1

给box一个位置，它会起作用。

以下代码：

$(document).ready(function() {
  $("button").click(function() {
    $("#box1").animate({
      left: '250px'
    });
  });
});

.box {
  position: relative;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  display: inline-block;
  padding: 20px;
  margin: 5px;
}
p {
  font-family: Arial;
  color: aquamarine;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h1 id="he"><center>New website</center></h1>
<p id="pp">Hey what's up?</p>
<button id="butt">click here</button>
<div id="box1" class="box">box9</div>

Answer 2

试试这个：

$(document).ready(function(){
    $("button").click(function(){
        $("#box1").animate({"left": "250px"});
    });
});

Answer 3

试试这个：

$(document).ready(function(){
    $("button").click(function(){
         $("#box1").animate({'left': '250px','position':"absolute"});
    });
});

Answer 4

你的动画错了。首先，您可以指定位置。 div框应该是绝对位置。那么左边的值应为0。

这里是css代码：。

 .box{
        border: 2px solid black;
        width:100px;
        height: 100px;
        display: inline-block;
        padding: 20px;
        margin: 5px;
        position:absolute;
        left:0;
    }

现在你尝试它会动画。

JavaScript jQuery动画不起作用，其他所有效果都很好

4 个答案: