我正在尝试使用 JavaScript 重新创建一个简单的 jQuery 动画。但这不起作用。如果你告诉我哪里出了问题，我会很高兴，因为对我来说这似乎是对的。预先感谢您!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").animate({fontSize: "100px"}, "slow");
});
</script>
</head>
<body>
<div style="background:#98bf21;height:200px;width:600px;">Hello World</div>
</body>
</html>
下面是 JavaScript 动画:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is a title!!!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="background-color: #98bf21; width: 200px; height: 600px;">Hello World!</div>
<button onclick="startFontIncrease()">Click me</button>
<script>
function startFontIncrease() {
var element = document.getElementsByTagName("div")[0];
var fontSize = element.style.fontSize;
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize;
}
}
}
</script>
</body>
</html>
最佳答案
转录为纯 JS 存在许多问题。
首先，您还没有在内联样式中设置初始字体大小，因此当您尝试访问它时它是一个空字符串。所以 HTML 应该是这样的:
<div style="background-color: #98bf21; width: 200px; height: 300px; font-size: 12px;">
Hello World!
</div>
然后，您必须从字体大小增加函数中获取初始字体大小，并且还必须解析它以确保获得数字(而不是“12px”字符串，否则当您尝试时它将是 NaN增加)。
var element = document.getElementsByTagName("div")[0];
var fontSize = parseInt(element.style.fontSize);
function startFontIncrease() {
var id = setInterval(increaseFont, 5);
function increaseFont() {
if (fontSize == 100) {
clearInterval(id);
}
else {
fontSize++;
element.style.fontSize = fontSize + 'px';
}
}
}
关于javascript - 字体增加动画不起作用 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41699723/