0

我在一个文档中调用了 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 组件，它就不起作用了。

你们谁能告诉我这是为什么？

感谢所有答案！

4

1 回答 1

0

找到答案：在我有之前：

html, body{
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

由于某种原因，这不允许 WOW.js 插件工作

但后来我把它改成了：

html, body{
    margin: 0 auto;
    overflow-x: hidden;
}

..它奏效了！

我不确定这是否有副作用。有的话会评论！

于 2016-08-02T21:27:39.737 回答