Pourquoi animate() de jQuery ne parvient-il pas à animer la couleur d'arrière-plan au survol de la souris et comment puis-je y remédier ?

jQuery : animer les changements de couleur d'arrière-plan au survol de la souris

Arrière-plan :

jQuery fournit une puissante méthode animate() pour gérer de manière transparente transitionnez diverses propriétés CSS au fil du temps. Cependant, tenter d'animer la propriété « background-color » entraîne souvent une erreur « Propriété non valide ».

Problème :

Lorsque vous essayez d'animer la couleur d'arrière-plan à l'aide jQuery au survol de la souris, vous pourriez rencontrer ceci erreur :

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

Solution :

Pour résoudre ce problème, il est nécessaire de charger le plugin de couleur jQuery, qui prend en charge l'animation de diverses propriétés de couleur. Voici comment l'implémenter :

// Include the jQuery color plugin


// Animate background color on mouseover using plugin
$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

Implémentation du plugin :

Le plugin améliore la méthode principale jQuery animate() pour gérer les transitions de couleurs. Il vous permet de spécifier des valeurs de couleur dans différents formats, notamment les noms de couleurs RVB, hexadécimaux et CSS. Voici un extrait du plugin :

jQuery.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
    jQuery.fx.step[e] = function (g) {
        ...
        g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
    }
});

Cette fonction étape calcule les valeurs de couleur de transition de manière incrémentielle, garantissant une animation fluide entre les couleurs de début et de fin.

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!