Question

我正在尝试使用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>

Answer 1

如果可能的话，不要给出慢属性，而是在几毫秒内调整它们。

<script>
$(document).ready(function(){
    $("div").animate({fontSize: "100px"}, 2000);
});
</script>

Answer 2

转录到普通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';
        }
    }
}

Answer 3

您的实现不起作用，因为您获得的div的fontSize是“” 你需要的是

document.getElementById("btn").addEventListener("click",startFontIncrease);
  function startFontIncrease() {
    var element = document.getElementsByTagName("div")[0];
    var fontSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));

    var id = setInterval(increaseFont, 100);

    function increaseFont() {
      if (fontSize == 100) {
        clearInterval(id);
      } else {
        fontSize++;
        element.style.fontSize = fontSize + "px";
      }
    }
  }

对于jQuery版本，Hameed Syed接缝是正确的。

字体增加动画不起作用JavaScript

3 个答案: