I'm trying to animate H1 elements for many pages using AOS (animate on scroll). I have several pages that use the title so I'm selecting all the titles with jQuery. If I type in the attributes manually in each title it works, but not when adding them through jQuery. I have selected other elements with jQuery to animate them and they do work. The tile is at the very top of each page.Thanks!
<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();
});
<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); });
您应该将其附加到标题中:
<script type="text/javascript">jQuery(document).ready(function($){$(function() { AOS.init(); }); }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.