明るい黄色にアニメーションしてから白に戻るjquery

Question

私はul liの背景色を黄色にしてから白に戻そうとしています。私は以下のコードを使用しますが、動作しません。

$('#items ul li.test').animate({ 'background-color' : '#FFFEBC' }, 3000, function(){ 
    $('#items ul li.test').animate({ 'background-color' : '#ffffff' }, 3000); 
}); 

もちろん、jQueryライブラリも含まれていますが、このコードは別の機能によってトリガーされます。関数は動作しますがアニメーションは動作しません。

.testは、ul liクラスです。

コードに問題はありますか？

Answer 1

jQueryはアニメーションカラーをサポートしていません。 animate docsを参照してください。

jQuery UI adds the ability色をアニメーション化する。あなたが他の何かのためにそれを使用していない場合でも、それは大きなハンマーです。 :-)

this oneのようなカラーアニメーションを追加するプラグインがいくつかあります。検索を行う場合は、いくつかのオプションを選択する必要があります。 。、3000、関数（）{ $（ '＃項目ULのLi：

Answer 2

documentationから：

すべてのアニメーション化されたプロパティは、以下に示すよう除き、単一の数値にアニメーションする必要があります。 jQuery.Color（）プラグインが使用されていない限り、）、数字以外のほとんどのプロパティは基本的なjQuery機能を使用してアニメーション化することはできません（たとえば、幅、高さ、または左にアニメーションを付けることはできますが、背景色にすることはできません）。特に指定しないかぎり、プロパティ値はピクセル数として扱われます。該当する場合は単位emと％を指定できます。

したがって、使用するように指示するプラグインを使用してください。

Answer 3

$（ '＃項目UL li.test'）（{ '#FFFEBC' 'のbackgroundColorを'}アニメーションこのコードを試します.test '）。animate（{' backgroundColor '：' #ffffff '}、3000）; }）;

私はそれをテストしていませんでしたが、動作する可能性があります。

Answer 4

jquery UIとハイライト方法を使用してこの効果を実現します。

あなたはjqueryのUI、

は、単にあなたがしたい場合は、まあjqueryのUIのダウンロードビルダーから

Answer 5

をのみハイライト効果をダウンロードすることができますハイライト効果

$('#items ul li.test').effect('highlight'); 

を使用していたら、あなたのコードには何の誤りもないようです。しかし、ID（#items）のCSSクラスを設定しているかもしれません。あなたの背景色を上書きする可能性があります。

あなたのお手伝いをすると、HTMLからIDとクラスを削除しています。うまくいきます！下記参照...

HTML

<ul> 
    <li>123</li> 
    <li>456</li> 
</ul> 

jQueryのコード（私が使用している（ドキュメント）.ready（） - あなたのケースでは、あなたがイベントでハンドリングしている

$(document).ready(function(){ 
     $('ul li').animate({ 'background-color' : '#FFFEBC' }, 500, 
     function(){ $('ul li').animate({ 'background-color' : '#CCCCCC' }, 500, 
     function(){ $('ul li').animate({ 'background-color' : '#ffffff' }, 500); 
     }); 
    });} 
); 

・ホープ、このことができます。 ！