Warum schlägt „animate()' von jQuery bei „backgroundColor' fehl und wie kann ich das beheben?

jQuery animate backgroundColor: Fehler bei der Behandlung einer ungültigen Eigenschaft

Wenn Sie versuchen, eine Änderung der Hintergrundfarbe mit jQuery beim Mouseover zu animieren, kann es sein, dass Sie auf ein „ Fehler „Ungültige Eigenschaft“, obwohl die Syntax korrekt ist. Dies liegt daran, dass jQuery Farbanimationen nicht nativ verarbeitet.

Lösung: Verwendung eines jQuery-Farb-Plugins

Um dieses Problem zu beheben, können Sie ein jQuery-Farb-Plugin verwenden, z wie in der Antwort angegeben. Das Plugin erweitert die Animationsfunktionalität von jQuery um Farbtransformationen, einschließlich Hintergrundfarbe.

Vorteile der Verwendung des Plugins

• Leicht, fügt Ihrer Codebasis nur ein paar Kilobyte hinzu
• Minimaler Overhead, dadurch hohe Leistung
• Kompatibilität mit Major Browser, einschließlich Safari

Verwendung

Um das Plugin zu verwenden, fügen Sie den folgenden Code in Ihre Seite ein:

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

Dann Sie können die Hintergrundfarbe wie folgt animieren:

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

Benutzerdefiniert Minimierung

Wenn Sie lieber Ihre eigene minimierte Version des Plugins erstellen möchten, können Sie Online-Kompressoren wie JSCompress oder Closure Compiler verwenden. Das Ergebnis sollte dem in der Antwort angegebenen ähneln.

Das obige ist der detaillierte Inhalt vonWarum schlägt „animate()' von jQuery bei „backgroundColor' fehl und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!