Remplacer fadeIn et fadeOut de jQuery par animate.css

Quand on utilise les animations jQuery, on peut souvent être confronté a un problème de performances avec des animations qui saccadent etc.

Dans le cadre d’un projet perso, j’ai donc remplacé les fonctions de jQuery fadeIn et fadeOut pour qu’elles utilisent la librairie animate.css

Il vous faut donc commencer par inclure cette librairie dans votre header : https://daneden.github.io/animate.css/

Puis surcharger les fonctions jQuery a l’aide du code suivant :

$.fn.extend({
    fadeIn: function(callback) {
        var animationEnd = (function(el) {
            var animations = {
                animation: 'animationend',
                OAnimation: 'oAnimationEnd',
                MozAnimation: 'mozAnimationEnd',
                WebkitAnimation: 'webkitAnimationEnd',
            };

            for (var t in animations) {
                if (el.style[t] !== undefined) {
                    return animations[t];
                }
            }
        })(document.createElement('div'));
        
        if(this.css("display") == "none") {
            this.css("display", "block").addClass('animated fadeIn').one(animationEnd, function(e) {
                jQuery(this).removeClass("animated fadeIn");
                if (typeof callback === 'function') callback();
            });
        } else {
            if (typeof callback === 'function') callback();
        }
        return this;
    },
    fadeOut: function(callback) {
        var animationEnd = (function(el) {
            var animations = {
                animation: 'animationend',
                OAnimation: 'oAnimationEnd',
                MozAnimation: 'mozAnimationEnd',
                WebkitAnimation: 'webkitAnimationEnd',
            };

            for (var t in animations) {
                if (el.style[t] !== undefined) {
                    return animations[t];
                }
            }
        })(document.createElement('div'));
        
        if(this.css("display") != "none") {
            this.addClass('animated fadeOut').one(animationEnd, function(e) {
                jQuery(this).removeClass("animated fadeOut");
                jQuery(this).css("display", "none");
                if (typeof callback === 'function') callback();
            });
        } else {
            if (typeof callback === 'function') callback();
        }
        return this;
    },
});

Si vous souhaitez modifier le délai d’affichage, il faut le modifier via animate.css directement.

Ces deux fonctions prennent en charge le callback :

$(element).fadeIn(function() {
     // Do something
})

Vous aimerez aussi...