选择要使用 jQuery 制作动画的元素时，AOS（滚动动画）库不起作用答案

【问题标题】：AOS (animate on scroll) library not working when selecting elements to animate with jQuery选择要使用 jQuery 制作动画的元素时，AOS（滚动动画）库不起作用
【发布时间】：2019-10-01 22:22:09
【问题描述】：

我正在尝试使用 AOS（滚动动画）为许多页面制作 H1 元素的动画。我有几个使用标题的页面，所以我使用 jQuery 选择所有标题。如果我在每个标题中手动输入属性，它会起作用，但在通过 jQuery 添加它们时不起作用。我用 jQuery 选择了其他元素来为它们设置动画，它们确实有效。磁贴位于每页的最顶部。谢谢！

 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

 <h1 class="title"> </h1>

 $(document).ready(function () {
    $('.title').attr({
       "data-aos": "zoom-in",
       "data-aos-duration": "2000"
    });

    AOS.init();
 });

 //refresh animations
 $(window).on('load', function() {
    AOS.refresh();
 });

【问题讨论】：

尝试移动 AOS.init();加载窗口。同时从窗口加载中删除 aos.refresh。
那没有解决。

标签： javascript jquery animation animate.css animate-on-scroll

【解决方案1】：

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<h1 class="title"> </h1>

$(document).ready(function () {
    $('.title').attr({
        "data-aos": "zoom-in",
        "data-aos-duration": "2000"
    });
    setTimeout(() => {
        AOS.init();
    }, 120);
});

【讨论】：

【解决方案2】：

你应该把它附加到标题中：

<script type="text/javascript">jQuery(document).ready(function($){$(function() {      AOS.init(); });  });  </script>

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案添加解释并说明适用的限制和假设。 From Review