我在文档中调用了 WOW.js 和 Animate.js:
<head>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width">
<title> Portfolio </title>
<!-- angularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<!-- JQuery -->
<script src="JS/jQuery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Font Awesome CDN -->
<script src="https://use.fontawesome.com/e42f2bbc33.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="JS/wow.min.js"></script>
<link rel="stylesheet" href="animate/animate.min.css">
<!-- Raleway font -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
但是当我实际使用 WOW.js 时，它根本不起作用，而是将元素全部留空。我知道这些文件和语法是正确的，因为当我在同一目录(相同索引)中的单独 HTML 文档中尝试时，它起作用了:
<head>
<script src="JS/wow.min.js"></script>
<link rel="stylesheet" href="animate/animate.min.css">
<script>
new WOW().init();
</script>
</head>
<body>
<div id="block" style="height: 800px; background-color: green">
helo
</div>
<h1 class="wow fadeInUp"> Hello </h1>
</body>
当我从其他文档(例如 bootstrap 和 jQuery)添加内容时，它停止工作。我的问题是:为什么添加更多链接后它不起作用，我该如何解决。我不认为 JSFiddle 或实时链接是必需的，因为问题只是在头脑中，我按照其余的语法来喝茶。但是，如果你真的需要它:
这是插件 WOW.js 和 AnimateCSS 的工作使用: https://jsfiddle.net/xs2b49qs/
这是插件 WOW.js 和 AnimateCSS 的非工作用途: https://jsfiddle.net/hv4Lv4g3/
我在制作 JSFiddles 时还注意到没有文档的 CSS/样式组件，它确实有效。但是一旦我添加了样式 CSS 组件，它就不起作用了。
谁能告诉我这是为什么？
谢谢大家的回答!
最佳答案
找到答案: 在我之前:
html, body{
height: 100%;
width: 100%;
margin: 0 auto;
overflow-x: hidden;
}
出于某种原因，这不允许 WOW.js 插件工作
但后来我把它改成了:
html, body{
margin: 0 auto;
overflow-x: hidden;
}
.. 成功了!
不过我不确定这是否有副作用。有的话会评论的!
关于javascript - HTML 文档 header 中的调用顺序重要吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38730705/