jQuery アニメーションの背景色

Anika Tabassum Era 2024年2月15日

jQuery jQuery Animate

css() を使用して jQuery で背景色を変更する
jQueryUI ライブラリで animate() メソッドを使用する
jQuery-colors プラグインで animate() メソッドを使用する

div の背景色や jQuery の慣例を使用する要素を直接変更する方法はありません。これは、css() メソッドを介してプロパティを直接変更できることを意味しますが、jQuery が不足しています。

jQuery の css() メソッドは CSS に直接接続し、ほとんどのプロパティは同じように影響を受けます。より正確には、これは基本的な CSS の形式です。

それがどのように機能するかの例を見ていきます。

次に、animate() 関数を使用してこのタスクを解決できます。しかし、ドキュメントによると、animate() メソッドは数値プロパティの場合にのみ有効です。

背景色、色などの非数値プロパティは、jQueryUI ライブラリを追加しない限り、animate() メソッドによって処理されません。複数のテーマと、animate() 関数をパワーアップできるようにするいくつかのプラグインがあります。

次の例では、このケースのデモも行います。

もう 1つの簡単な作業は、基本的なプラグインを追加して animate() メソッドを開始し、数値以外のプロパティを処理することです。ここでは、プラグイン jQuery-colors の例でトピックをカバーします。

それでは、コード行に飛び込みましょう。

`css()` を使用して jQuery で背景色を変更する

固定次元の基本的な div 要素があります。クリック可能なボタンが追加され、クリックすると背景色が変わります。

ここで、構文で .css({'background-color': 'value'}) を使用していることに気付くでしょう。そして、この方法には幅広い色の好みがあります。

コードスニペット：

<!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>

出力：

css() を使用して背景色に影響を与える

`jQueryUI` ライブラリで `animate()` メソッドを使用する

この点で、2つの CDN を使用します。 1つは js ファイル用で、もう 1つはテーマ用です。

ライブラリは、他の複数のプラグインでも構成されています。だから、ある意味で、それはバルクです。

ただし、背景を更新するためのここでの構文は .animate({backgroundColor: "value"}) になります。 RGB 値、または色の hex 値も挿入できます。

ただし、比較すると、この方法にはいくつかの色の準拠があります。

コードスニペット：

<!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>

出力：

jQueryUI ライブラリで animate() メソッドを使用

`jQuery-colors` プラグインで `animate()` メソッドを使用する

ライブラリに依存するよりも、単純なプラグインの方がはるかに最適です。したがって、jQuery-colors プラグインは、背景色をアニメーション化する目的を果たします。

ここでは CDN を使用して、必要なインポートを初期化します。また、限られた範囲の色相コレクションもあります。

コードスニペット：

<!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>