jquery - jqueryの色遷移アニメーション

Question

jQuery を使用して色間をアニメーション化する方法、つまり、ある色をフェードアウトして別の色をフェードインする方法。

これは CSS3 キーフレームで実行できることはわかっていますが、w3schools で言及されているように Internet Explorer では機能しません。すべてのブラウザーで機能する標準的な方法が必要です。

stackoverflow で検索すると、jQuery カラー プラグインが必要であることが示されました。もっと簡単な方法を知っている人はいますか？

Answer 1

あなたはこれを試すことができます：ライブデモ

CSS

#content {
    width: 100%; 
    background: #eff6f4;
    transition: background 4s linear;
    -webkit-transition: background 4s linear;
    -moz-transition: background 4s linear;
}

JQuery

$('#content').css('background', '#C89CBD');

これにより、4秒で背景色が変わります。

アップデート

IEが必要な場合は、次のようにすることができます。

$('#content').fadeOut(500, function(){
    $(this).css('background', bg).fadeIn(2000);
});

それほど良くはありませんが、機能します。ライブデモ

Answer 2

カラー プラグインは非常にシンプルですが、これ以上シンプルなものを想像することはできません。あなたがする必要があるのは、別のスクリプトを含めることだけです:

<script src="jquery.color.min.js"></script>

次に、色をアニメーション化します。

  $(foo).animate({
      backgroundColor: "#00FF00"
  }, 1000 );