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

问题描述 投票:0回答:4

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

$(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>
javascript jquery html css css3
4个回答
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>

0
投票

试试这个:

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

0
投票

试试这个:

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

0
投票

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

这里的css代码:

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

现在你尝试它将动画。

© www.soinside.com 2019 - 2024. All rights reserved.