Remove delays from my jQuery plugin

Question

I have one issue in my plugin for jQuery. It adding animation classes and changing something in DOM element and contain interval.

To working well it must be perfect connect in time with css animation. It's look like this.

(function($) {
 $.fn.foo = function() {
    //add class to element, now it's animating!
    //do something

    setInterval(fooBar(),time);

}

})(jQuery);

Sometimes, can see delay, specially on mobile. How I can remove delays, lags from this? setInterval and animation have the same duration and they must starts and ends at the same time. Any solution?

Answer 1

Use the animationend event.

$.fn.foo = function() {
    // add class to element, now it's animating
    $(this).on("animationend", fooBar);
}

This event is triggered automatically when the CSS animation completes.