0

I'm using WOW.js to animate a few div containers and would like to avoid the data-* attributes.

Example HTML

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

Example JS

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

wow.init();

Is it possible to control the data attributes duration, delay, offset and iteration by a class or by JS, e.g. on init()?

My workaround would be to search for classes like class="wowDelay-5s" and add an attribute to it's element as data-wow-delay="5s", but I prefer the proper way, if there is any.

Thanks in advance!

Mr. B.
  • 8,041
  • 14
  • 67
  • 117

1 Answers1

0

there are 2 different ways to get the data attributes with jquery.

fisrt, you look for the attr

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

second one is to use the data function from jquery

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

to set the attribute with an init function it simple too

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

and 

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

i hope this helps you

mtizziani
  • 956
  • 10
  • 23
  • 1
    I think you need to read the question again - he wants to use class like `wowDuration-5s` - and "convert" that to attribute `data-wow-duration: 5s` - because he can't directly create the data-* attributes in his CMS – Jaromanda X Jun 06 '17 at 06:39