2011-11-30 8 views
10

jQuery用のサードパーティ製プラグインまたはjQueryスクリプトを探しています。これは、 "from color"と "to color"に基づいてフェードイン/アウトエフェクトを作成できます。私がそれを見ている例:jQuery - ある色から別の色にフェードイン/アウトするには? (可能なサードパーティ製プラグインfor jQuery?)

$(selector).fadeColor({ 
    from: "#900", // maroon-red color 
    to: "#f00", // blood-red color 
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds 

答えて

15

jQuery UIカラーアニメーションを含むようにjQueryのanimate方法を拡張します。

$("#someId").animate({backgroundColor: "#ff0000" }); 

ここにはworking exampleがあります。

+0

ためhttp://api.jquery.com/animate/を参照してください:/ –

+0

あなたはjQueryのUIが含まれていますか?コアjQueryライブラリの後ろにそれを含めてください。あなたの質問をいくつかのコードで更新するか、問題を示すjsfiddleを作成してください。 –

+0

@JamesAllardiceアニメーションは非常に速く起こり、気付くことさえ困難です。フェーディングアニメーションをよりスムーズに表示することができますか? –

3

jQuery UI animate functionがそれを行います。

See here for jsFiddle.

+0

のコード例では、さらに多くの私を助けるだろう:) –

+0

をあなたもjQueryのUIを含めない限り、jQueryの 'animate'は、それを拡張した、色をアニメーション化しません。私の答えを見てください。 –

+0

@Commando更新を参照してください。 –

0

は、ここに私の2セントの価値がある - 継続的に脈動ボタンのjsFiddleが、時にドキュメントの負荷を引き起こしました。

Demo here

function fadeDivIn(){ 
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();}); 
} 

function fadeDivOut(){ 
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();}); 
} 

$(document).ready(function(){ 
    fadeDivIn(); 
}); 
+1

これにはjQuery UIが必要です。 –

10

あなたは別のプラグインを必要としません。例:

jQueryの

$(selector).css("color", "blue"); 

CSS

selector { 
    transition: color .3s; 
} 

これはうまく動作(およびウェブサイトを減速せずに)します。

+2

時間を節約してこれを使用してください! – KryptoniteDove

+0

さらに短い:$(セレクタ).css( "transition"、 "color .3s").css( "color"、 "blue"); – Mirko

関連する問題