Ich versuche, eine Änderung in backgroundColor mithilfe von jQuery beim Mouseover zu animieren.
Ich habe ein Beispiel überprüft und es scheint richtig zu sein. Es funktioniert mit anderen Eigenschaften wie fontSize, aber mit backgroundColor erhalte ich den Fehler "Invalid Property". Das Element, mit dem ich arbeite, ist ein Div.
$(".usercontent").mouseover(function() {
$(this).animate({ backgroundColor: "olive" }, "slow");
});
Irgendwelche Ideen?
javascript
jquery
colors
jquery-animate
SteveCl
quelle
quelle
rgba(0, 0, 0, 0)
anstelle des erwarteten Leer- / Nullwerts zurück, wenn keine Hintergrundfarbe definiert ist. Um dies zu "beheben", muss das Element eine anfängliche Hintergrundfarbe haben.Antworten:
Das Farb-Plugin ist nur 4 KB so viel billiger als die UI-Bibliothek. Natürlich sollten Sie eine anständige Version des Plugins verwenden und keine fehlerhafte alte Sache, die Safari nicht beherrscht und abstürzt, wenn die Übergänge zu schnell sind. Da keine minimierte Version mitgeliefert wird, können Sie verschiedene Kompressoren testen und Ihre eigene minimale Version erstellen . YUI erhält in diesem Fall die beste Komprimierung und benötigt nur 2317 Bytes. Da es so klein ist, ist es hier:
quelle
v1
Zweig auswählen , um die alte Version zu erhalten (die immer noch funktioniert), aber viel leichter ist.Ich hatte das gleiche Problem und habe es durch Einbeziehen der jQuery-Benutzeroberfläche behoben. Hier ist das komplette Skript:
quelle
Mach es mit CSS3-Übergängen. Die Unterstützung ist großartig (alle modernen Browser, auch IE). Mit Compass und SASS ist dies schnell erledigt:
Reines CSS:
Ich habe einen deutschen Artikel zu diesem Thema geschrieben: http://www.solife.cc/blog/animation-farben-css3-transition.html
quelle
Bitstorm hat das beste jquery-Farbanimations-Plugin, das ich je gesehen habe. Es ist eine Verbesserung des jquery-Farbprojekts. Es unterstützt auch rgba.
http://www.bitstorm.org/jquery/color-animation/
quelle
Sie können die jQuery-Benutzeroberfläche verwenden, um diese Funktionalität hinzuzufügen. Sie können genau das auswählen, was Sie benötigen. Wenn Sie also Farben animieren möchten, müssen Sie lediglich den folgenden Code einfügen. Ich habe wenn von der neuesten jQuery-Benutzeroberfläche (derzeit 1.8.14)
Nach dem Komprimieren mit YUI sind es nur 1,43 KB:
Sie können Farben auch mithilfe von CSS3-Übergängen animieren, dies wird jedoch nur von modernen Browsern unterstützt.
Verwenden der Kurzschrift-Eigenschaft:
Im Gegensatz zu regulären Javascript-Übergängen sind CSS3-Übergänge hardwarebeschleunigt und daher flüssiger. Sie können Modernizr verwenden, um herauszufinden, ob der Browser CSS3-Übergänge unterstützt. Wenn dies nicht der Fall ist, können Sie jQuery als Fallback verwenden:
Denken Sie daran, stop () zu verwenden, um die aktuelle Animation zu stoppen, bevor Sie eine neue starten. Andernfalls blinkt der Effekt eine Weile, wenn Sie zu schnell über das Element fahren.
quelle
Für alle, die das finden. Verwenden Sie besser die jQuery-UI-Version, da sie in allen Browsern funktioniert. Das Farb-Plugin hat Probleme mit Safari und Chrome. Es funktioniert nur manchmal.
quelle
Sie können 2 Divs verwenden:
Sie können einen Klon darauf legen und das Original ausblenden, während Sie den Klon einblenden.
Wenn die Überblendungen abgeschlossen sind, stellen Sie das Original mit dem neuen Hintergrund wieder her.
jsFiddle Beispiel
.toggleClass()
.offset()
.fadeIn()
.fadeOut()
quelle
Ich habe eine Kombination von CSS-Übergängen mit JQuery verwendet, um den gewünschten Effekt zu erzielen. Offensichtlich werden Browser, die keine CSS-Übergänge unterstützen, nicht animiert, aber es ist eine leichte Option, die für die meisten Browser gut funktioniert und für meine Anforderungen eine akzeptable Verschlechterung darstellt.
Abfrage zum Ändern der Hintergrundfarbe:
CSS mit Übergang zum Ausblenden der Änderung der Hintergrundfarbe
quelle
Heutzutage unterstützt das jQuery-Farb-Plugin die folgenden benannten Farben:
quelle
Ich verwende gerne delay (), um dies zu erreichen. Hier ein Beispiel:
Dies kann durch eine Funktion aufgerufen werden, wobei "Element" die Elementklasse / Name / etc. Ist. Das Element wird sofort mit dem # FCFCD8-Hintergrund angezeigt, eine Sekunde lang gedrückt gehalten und dann in #EFEAEA eingeblendet.
quelle
Fügen Sie einfach das folgende Snippet unter Ihrem JQuery-Skript hinzu und genießen Sie:
Siehe das Beispiel
Referenz für weitere Informationen
quelle
Ich bin mit demselben Problem auf diese Seite gestoßen, aber mit folgenden Problemen:
Mit dem oben Gesagten schloss das so ziemlich jede Antwort aus. Da mein Farbverlauf sehr einfach war, habe ich stattdessen den folgenden schnellen Hack verwendet:
Das obige erstellt ein temporäres Div, das niemals in den Dokumentenfluss eingefügt wird. Ich verwende dann die in jQuery integrierte Animation, um eine numerische Eigenschaft dieses Elements zu animieren - in diesem Fall
width
-, die einen Prozentsatz (0 bis 100) darstellen kann. Dann übertrage ich mit der Schrittfunktion diese numerische Animation mit einer einfachen Hex-Berechnung auf die Textfarbe.Dasselbe hätte mit erreicht werden können
setInterval
, aber mit dieser Methode können Sie von den Animationsmethoden von jQuery profitieren - wie.stop()
- und Sie könneneasing
und verwendenduration
.Offensichtlich ist es nur für einfache Farbüberblendungen von Nutzen. Für kompliziertere Farbkonvertierungen müssen Sie eine der oben genannten Antworten verwenden - oder Ihre eigene Farbüberblendungsmathematik codieren :)
quelle
Probier diese:
Sie können hier eine Vorschau des Beispiels anzeigen : http://jquerydemo.com/demo/jquery-animate-background-color.aspx
quelle
Das ColorBlend-Plug-In macht genau das, was Sie wollen
http://plugins.jquery.com/project/colorBlend
Hier ist mein Highlight-Code
quelle
Wenn Sie Ihren Hintergrund nicht nur mit der Kernfunktionalität von jQuery animieren möchten, versuchen Sie Folgendes:
quelle
Versuche es zu benutzen
quelle
Probier diese:
Überarbeiteter Weg mit Effekten:
quelle