JQueryヘルプ - 背景色のアニメーション

Question

JQueryを使用して、私がしたいことは、関数を呼び出すときに、 "#page" DIVの背景色をCSS定義の背景色から黄色にフェードインさせる関数を作成することです#pageの元のCSS背景色に戻ります。

私はこれをJQueryでどのように行うことができますか？

JQueryには、「アニメーション」機能と「ハイライト」機能の両方が備わっています。それは "ハイライト"が適切なオプションかもしれないようだが、私は確信していない。

おかげ

Answer 1

あなたは、元の色にdiv背を向けるために、コールバックに内蔵されたjQueryの機能animate()を使用することができます。または、jQuery pulse pluginを使用して自動的に行います。

希望に役立ちます！

Answer 2

色の間でアニメーションを作成するには、colorプラグインが必要です。

は、あなたがどのようないくつかのコール「フラッシュ」を達成するためにこのようなthis oneなどのプラグインをチェックアウトすることができます以前のSO q & a

Answer 3

を参照してください。

残念ながら、「jquery flash plugin」という用語を検索すると、SWFプレーヤープラグインで何百もの結果が得られます。

Answer 4

function flashColor(id) 
{ 
    var container = $('#'+id); 
    if(container.length) 
    { 
     var originalColor = container.css('backgroundColor'); 
     container.animate({ 
      backgroundColor:'yellow' 
     },'normal','linear',function(){ 
      $(this).animate({ 
       backgroundColor:originalColor 
      }); 
     }); 
    } 
} 

Answer 5

この1つのだけの機能のためのjQuery UIをロードすることはかなり重い。その、しかし、あなたはとにかくそれを使用している場合は、あなたが望む効果は「ハイライト」

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

Answer 6

あなたがあります名前付き色を使用する場合は、jQueryカラープラグインのみが必要です（例：'#FFFF9C'の代わりに'yellow'）。 animateでさまざまな成功を収めましたが、jQueryのcssに組み込まれたコールバックを使用すると、ほとんどの場合問題なく動作するようです。

この機能を追加してみてください：

$(document).ready(function() { 

    $.fn.animateHighlight = function (highlightColor, duration) { 
     var highlightBg = highlightColor || "#FFFF9C"; 
     var animateMs = duration || 1000; 
     var originalBg = this.css("background-color"); 

     if (!originalBg || originalBg == highlightBg) 
      originalBg = "#FFFFFF"; // default to white 

     jQuery(this) 
      .css("backgroundColor", highlightBg) 
      .animate({ backgroundColor: originalBg }, animateMs, null, function() { 
       jQuery(this).css("backgroundColor", originalBg); 
      }); 
    }; 
}); 

などのようにそれを呼び出す：jQueryの1.5を（このためのUIのプラグインを必要としない）を使用して、IE9、FF4、およびChromeでテスト済み

$('#page').animateHighlight(); 

、 。すべてのブラウザと

Answer 7

テスト

$(document).ready(function() { 
    var id = $("div#1"); // div id=1 
    var color = "lightblue"; // color to highlight 
    var delayms = "800"; // mseconds to stay color 
    $(id).css("backgroundColor",color) 
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g 
    .css("backgroundColor",color).delay(delayms).queue(function() { 
     $(id).css("backgroundColor",""); 
     $(id).dequeue(); 
    }); 
}); 

Answer 8

がこれだけは私を助けました。出典：questions/5205445

$("div").click(function() 
{ 
    // do fading 3 times 
    for(i=0;i<3;i++) 
    { 
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0); 
    } 
});