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

Question

我正在尝试使用 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();
 });

Answer 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);
});

Answer 2

您应该将此附加到标题中：

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