Question

此代码不起作用。我完全遵循animate（）的语法，但没有工作。

<!DOCTYPE html>
<html>
<head>
  <style>
    #testing {
      background-color: skyblue;
      Position: absolute;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("#testing").animate({
          width: 100%,
          height: 100%
        });
      });
    });
  </script>
</head>
<body>
  <button>Hide</button>
  <p>This is a paragraph with little content.</p>
  <div id="testing">Testing</div>
</body>
</html>

它根本不会抛出任何错误，也不会执行预期的功能。

Answer 1

https://jsfiddle.net/hafx8uaf/

$(document).ready(function() {
  $("button").click(function() {
    $("#testing").animate({
      width: "0%",
      height: "0%"
    });
  });
});

这里有一个有效的JsFiddle。您需要将宽度和高度设置为＆＃34; 0％＆＃34;如果要在单击按钮时隐藏div，请在JS中。如果你的动画效果为100％，则无效，因为它已经在CSS中达到100％。

Answer 2

看看你的CSS样式，#testing已经有100％的宽度和100％的高度，所以代码可能正常工作，它已经在动画的终点。

尝试将CSS更新为

<style>
    #testing
    {
        background-color: skyblue;
        Position: absolute;
        height: 10%;
        width: 10%;
    }
</style>

它可能会奏效。

编辑：您还需要在.animate上的宽度/高度条件周围添加双引号，所以

width: "100%", 
height: "100%"

否则会返回语法错误。

为什么jquery的animate函数不起作用？

2 个答案: