Pourquoi « animate() » de jQuery échoue-t-il sur « backgroundColor » et comment puis-je y remédier ?

jQuery anime backgroundColor : gestion d'une erreur de propriété non valide

Lorsque vous essayez d'animer un changement dans backgroundColor à l'aide de jQuery au survol de la souris, vous pouvez rencontrer un message " Erreur "Propriété invalide", malgré la syntaxe correcte. En effet, jQuery ne gère pas nativement les animations de couleurs.

Solution : Utilisation d'un plugin de couleur jQuery

Pour résoudre ce problème, vous pouvez utiliser un plugin de couleur jQuery, tel que comme celui fourni dans la réponse. Le plugin étend la fonctionnalité d'animation de jQuery pour gérer les transformations de couleurs, y compris backgroundColor.

Avantages de l'utilisation du plugin

• Léger, n'ajoutant que quelques kilo-octets à votre base de code
• Surcharge minimale, ce qui le rend très performant
• Compatibilité avec les principaux navigateurs, dont Safari

Utilisation

Pour utiliser le plugin, incluez le code suivant dans votre page :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.2.6/jquery.color.min.js"></script>

Ensuite, vous pouvez animer backgroundColor comme suit :

$(".usercontent").mouseover(function() {
    $(this).animate({
        backgroundColor: "olive"
    }, "slow");
});

Personnalisé Minification

Si vous préférez créer votre propre version minifiée du plugin, vous pouvez utiliser des compresseurs en ligne comme JSCompress ou Closure Compiler. Le résultat devrait être similaire à celui fourni dans la réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!