Comment fixer la vitesse par défaut d'un effet ?

Comme vous devez le savoir, il est possible de fixer la durée que prendra un effet de transition. La durée de cet effet est passée en paramètre, soit sous forme d'une valeur numérique (en millisecondes), soit sous forme d'une des trois valeurs prédéfinies : "slow", "default" ou "fast". Ces trois valeurs sont fixées dans la propriété speeds de l'objet "jQuery.fx".

En réalité, si vous passez une chaîne de caractères comme paramètre, jQuery va inspecter la propriété speeds (qui est précisément un objet) pour vérifier la présence de cette valeur. Si elle n'est pas trouvée (ou si ce paramètre est omis), alors c'est la valeur par défaut qui est utilisée.

En regardant de plus près, on constate que si "fast" et "slow" sont bien des valeurs prédéfinies, "default", en fait, ne l'est pas. C'est la propriété "_default" qui est renseignée, comme le montre le code suivant :

for( var prop in $.fx.speeds ){
    console.log( prop + ' : ' + $.fx.speeds[ prop ] );
}

// slow : 600
// fast : 200
// _default : 400

A partir de là, il devient facile de fixer sa propre valeur par défaut ou d'autres valeurs prédéfinies :

jQuery.fx.speeds._default = 500;
jQuery.fx.speeds.xtraSlow = 1500;
jQuery.fx.speeds.soFast = 50;

Exemple

Code CSS : 

#slow, #soSlow { float: left; margin: 1.2rem; width: 10rem; height: 10rem; border: 0.2rem dotted black; background-color: lightgreen; }

Code HTML : 

<div id="slow"></div>
<div id="soSlow"></div>

Code JS : 

    jQuery.fx.speeds.soSlow = 2000;
    
    $( window ).load( function(){
        
        setInterval( function(){
            $( "#slow" ).finish().animate({ "background-color" : "yellow" }, "slow", function(){
                $( this ).animate({ "background-color" : "blue" }, "slow", function(){
                    $( this ).animate({ "background-color" : "red" }, "slow" );
                });
            });
            
             $( "#soSlow" ).finish().animate({ "background-color" : "yellow" }, "soSlow", function(){
                $( this ).animate({ "background-color" : "blue" }, "soSlow", function(){
                    $( this ).animate({ "background-color" : "red" }, "soSlow" );
                });
            });
       }, 5000 );
        
    });