这段代码不起作用。我完全遵循了 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>它根本不会引发任何错误，也不会执行预期的功能。
https://jsfiddle.net/hafx8uaf/
$(document).ready(function() {
$("button").click(function() {
$("#testing").animate({
width: "0%",
height: "0%"
});
});
});
在这里，您有一个工作的JsFiddle。 如果要在单击按钮时隐藏div，则需要在 JS 中将宽度和高度设置为"0%"。如果您将动画动画化为 100%，则不会有任何效果，因为它在 CSS 中已经达到 100%。
查看您的 CSS 样式，#testing的宽度为 100%，高度为 100%，因此代码可能正常工作，它只是已经在动画的终点。
尝试将 CSS 更新为
<style>
#testing
{
background-color: skyblue;
Position: absolute;
height: 10%;
width: 10%;
}
</style>
它可能会起作用。
编辑：您还需要在.animate上的宽度/高度条件周围添加双引号，因此
width: "100%",
height: "100%"
否则，它将返回语法错误。