jQuery-Animationshintergrundfarbe

Anika Tabassum Era 15 Februar 2024

jQuery jQuery Animate

Verwenden Sie css(), um die Hintergrundfarbe mit jQuery zu ändern
Verwenden Sie die animate()-Methode mit der jQueryUI-Bibliothek
Verwenden Sie die Methode animate() mit dem Plug-in jQuery-colors

Es gibt keine direkte Möglichkeit, eine div-Hintergrundfarbe oder irgendein Element mit den jQuery-Konventionen zu ändern. Dies impliziert, dass wir die Eigenschaft direkt über die Methode css() ändern können, aber dem fehlt etwas jQuery.

Die Methode css() von jQuery verbindet sich direkt mit dem CSS, und meistens sind die Eigenschaften austauschbar betroffen. Genauer gesagt ist es eine Form von grundlegendem CSS.

Wir werden ein Beispiel sehen, wie es funktioniert.

Als nächstes können wir uns auf die Funktion animate() verlassen, um diese Aufgabe zu lösen. Laut Dokumentation ist die Methode animate() aber nur bei numerischen Eigenschaften wirksam.

Nicht-numerische Eigenschaften wie Hintergrundfarbe, Farbe usw. werden von der animate()-Methode nicht behandelt, es sei denn, wir fügen die jQueryUI-Bibliothek hinzu. Es verfügt über mehrere Themen und mehrere Plug-Ins, mit denen es die Funktion animate() aktivieren kann.

Unsere folgenden Instanzen werden auch für diesen Fall eine Demonstration haben.

Eine weitere einfache Aufgabe besteht darin, ein einfaches Plug-in hinzuzufügen, um die Methode animate() zu initiieren, um mit nicht-numerischen Eigenschaften umzugehen. Hier behandeln wir das Thema am Beispiel des Plug-ins jQuery-colors.

Springen wir also in die Codezeilen.

Verwenden Sie `css()`, um die Hintergrundfarbe mit jQuery zu ändern

Wir werden ein grundlegendes div-Element mit einer festen Dimension haben. Eine anklickbare Schaltfläche wird hinzugefügt, die die Hintergrundfarbe mit einem Klick ändert.

Hier werden Sie in der Syntax bemerken, dass wir .css({'background-color': 'value'}) verwenden. Und diese Methode hat eine breite Palette von Farbpräferenzen.

Code-Auszug:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="my" style="height:100px;width:100px"></div>
  <button id="btn">Hit</button>
<script>
  $(function(){
  $('#btn').click(function () {
     $('.my').css({ 'background-color': 'darkcyan' });
    });
  });
  </script>
</body>
</html>

Ausgang:

Verwenden Sie css(), um die Hintergrundfarbe zu beeinflussen

Verwenden Sie die `animate()`-Methode mit der `jQueryUI`-Bibliothek

In dieser Hinsicht werden wir zwei CDNs verwenden. Eine für die js-Datei und die andere für das Thema.

Die Bibliothek besteht auch aus mehreren anderen Plug-Ins. In gewissem Sinne ist es also Masse.

Die Syntax hier zum Aktualisieren des Hintergrunds lautet jedoch .animate({backgroundColor: "value"}). Sie können auch RGB-Werte oder hex-Werte für Farbe einfügen.

Aber im Vergleich dazu hat diese Methode ein paar Farbübereinstimmungen.

Code-Auszug:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">Demo</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({
    backgroundColor: "blue"
  });
});
</script>
</body>
</html>

Ausgang:

Verwenden Sie die animate()-Methode mit der jQueryUI-Bibliothek

Verwenden Sie die Methode `animate()` mit dem Plug-in `jQuery-colors`

Ein einfaches Plug-In ist weitaus optimaler, als sich auf eine Bibliothek zu verlassen. Das Plug-in jQuery-colors dient also dazu, die Hintergrundfarbe zu animieren.

Wir werden hier ein CDN verwenden, um die erforderlichen Importe zu initialisieren. Es hat auch eine begrenzte Auswahl an Farbtonkollektionen.

Code-Auszug:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color Animation Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js" integrity="sha512-VjRpiWhUqdNa9bwBV7LnlG8CwsCVPenFyOQTSRTOGHw/tjtME96zthh0Vv9Itf3i8w4CkUrdYaS6+dAt1m1YXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">colors</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({backgroundColor: "green"});
});
</script>
</body>
</html>