WOW.js

Question

我正在使用 WOW.js 为几个 div 容器设置动画，并希望避免使用 data-* 属性。

例子HTML

 <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">Content</div>

示例JS

var wow = new WOW({
    boxClass:     'wow',      
    animateClass: 'animated', 
    offset:       0,          
    mobile:       true,       
    live:         true        
});

wow.init();

是否可以控制数据属性 持续时间、延迟、偏移和迭代通过 class 或 JS，例如在 init()?

我的解决方法是搜索 class 之类的 class="wowDelay-5s" 并向它的元素添加属性 data-wow-delay="5s"，但我更喜欢正确的方法（如果有的话）。

提前致谢！

Answer 1

有 2 种不同的方法可以使用 jquery 获取数据属性。

首先，你找属性

var firstWay = $('.wow.slideInLeft').attr('data-wow-duration');

第二个是使用 jquery

中的数据函数

var secondWay = $('.wow.slideInLeft').data('wow-duration');

用初始化函数设置属性也很简单

$('.wow.slideInLeft').attr('data-wow-duration') = '2s';

和

$('.wow.slideInLeft').data('wow-duration', '2s');

希望对你有帮助

WOW.js - 如何避免 data-* 属性？

WOW.js - how to avoid data-* attributes?

html

javascript

jquery

animation