TypeIt 插件：如何让它在本地 html 文件上工作？

Question

所以我一直在尝试使用这个 fiddle 来制作动画文本：https://codepen.io/alexmacarthur/pen/MOPQvp；可以说我被它的灵活性震惊了。我试图将代码合并到我机器上的本地 HTML 文件中，但它不起作用。虽然几年前我选择了网络开发，但我在项目方面没有太多经验，希望这里有人能指出错误是什么，因为我觉得它应该是显而易见的。我的 HTML+JS 代码（我可能不应该将所有内容都放在一个文件中，但因为我只是在试验..）：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/typeit@4.3.0/dist/typeit.min.js"></script>
  <script>
  $(function() {
    new TypeIt('#element', {
      speed: 45
    })
    .type('The programers')
    .pause(300)
    .options({speed: 200})
    .delete(3)
    .options({speed: 45})
    .pause(300)
    .type('mer\'s wife sent him to teh sto.')
    .pause(500)
    .options({speed: 200})
    .delete(7)
    .type('he store.')
    .pause(500)
    .break()
    .options({speed: 45})
    .type('Her instructions were <em>"Buy butter. See if they have 10 eggs. If they do, buy ten.</em>"')
    .pause(1000)
    .break()
    .type('He came back with ten packs of butter. ')
    .pause(1000)
    .type('Because they have eggs.');
    });
  </script>
</head>

<body>

<h1 id="element"></h1>

</body>

</html>

当我打开文件时，我看到的只是一个空白屏幕:/ 在此先感谢所有花时间阅读的人！

Answer 1

我刚刚将 typeit 的版本更改为更新的版本，使用以下 HTML：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.min.js"></script>
    <script>
        $(function () {
            new TypeIt('#element', {
                speed: 45
            })
                .type('The programers')
                .pause(300)
                .options({ speed: 200 })
                .delete(3)
                .options({ speed: 45 })
                .pause(300)
                .type('mer\'s wife sent him to teh sto.')
                .pause(500)
                .options({ speed: 200 })
                .delete(7)
                .type('he store.')
                .pause(500)
                .break()
                .options({ speed: 45 })
                .type('Her instructions were <em>"Buy butter. See if they have 10 eggs. If they do, buy ten.</em>"')
                .pause(1000)
                .break()
                .type('He came back with ten packs of butter. ')
                .pause(1000)
                .type('Because they have eggs.');
        });
    </script>
</head>

<body>

    <h1 id="element"></h1>

</body>

</html>

TypeIt 插件：如何让它在本地 html 文件上工作？

TypeIt Plugin: How do I make it work on a local html file?

html

javascript

jquery

codepen