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>

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

2 个答案: