jqueryを使用して背景色をどのようにフェードイン/フェードアウトしますか？

jQueryでテキストコンテンツをフェードインするにはどうすればよいですか？

重要なのは、メッセージにユーザーの注意を引くことです。

この正確な機能（メッセージを強調表示するための3秒の輝き）は、強調表示効果としてjQuery UIに実装されています

https://api.jqueryui.com/highlight-effect/

色と持続時間は可変です

要素の背景色を具体的にアニメーション化する場合は、jQueryUIフレームワークを含める必要があると思います。その後、次のことができます。

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUIには、同様に役立つ可能性のある組み込みのエフェクトがいくつかあります。

http://jqueryui.com/demos/effect/

問題はJqueryでそれを行う方法であったことを知っていますが、単純なcssとほんの少しのjqueryで同じ効果を達成できます...

たとえば、 'box'クラスのdivがある場合、次のcssを追加します

.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}

次に、AddClass関数を使用して、「ボックスの強調表示」などの背景色が異なる別のクラスを追加するか、次のcssを使用します。

.box.highlighted {
  background-color: white;
}

私は初心者であり、この方法にはいくつかの欠点があるかもしれませんが、誰かに役立つかもしれません

これがコードペンです：https ://codepen.io/anon/pen/baaLYB

通常は.animate（）メソッドを使用して任意のCSSプロパティを操作できますが、背景色の場合はcolorプラグインを使用する必要があります。このプラグインをインクルードしたら、他の人が$('div').animate({backgroundColor: '#f00'})色を変更するように指示したようなものを使用できます。

他の人が書いたように、jQuery UIライブラリを使用してこれを行うこともできます。

jQueryのみを使用（UIライブラリー/プラグインなし）。jQueryでも簡単に削除できます

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

デモ：http : //jsfiddle.net/5NB3s/2/

• SetTimeoutは明度を50％から100％に増やし、基本的に背景を白にします（色に応じて任意の値を選択できます）。
• SetTimeoutは、ループで適切に機能するように匿名関数でラップされています（理由）

ブラウザのサポートに応じて、CSSアニメーションを使用できます。ブラウザサポートはCSSアニメーション用のIE10以降です。これは素晴らしいので、小さなイースターエッグだけの場合は、jquery UI依存関係を追加する必要はありません。サイトに不可欠な場合（別名IE9以下では必要）、jquery UIソリューションを使用してください。

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

次に、your-animationアニメーション化する要素にクラスを追加するjQueryクリックイベントを作成し、ある色から別の色への背景のフェードをトリガーします。

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

私はこれに似た何かを達成するために超シンプルなjQueryプラグインを書きました。私は本当に軽量なもの（それは732バイトに縮小されたもの）を望んでいたので、大きなプラグインやUIを含めることは私にとっては問題外でした。それはまだ少し荒れているので、フィードバックは大歓迎です。

ここでプラグインをチェックアウトできます：https : //gist.github.com/4569265。

プラグインを使用すると、背景色を変更してハイライト効果を作成しsetTimeout、プラグインを起動して元の背景色にフェードバックすることにより、簡単にハイライト効果を作成できます。

単純なJavaScriptのみを使用して2色をフェードするには：

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

出典：http : //www.pagecolumn.com/javascript/fade_text.htm

javascriptはjQueryまたは他のライブラリなしで白にフェードします：

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

印刷では、黄色はマイナスブルーなので、255未満の3番目のRGB要素（青）から開始すると、黄色のハイライトで始まります。次に、値10+を設定するvar unBlueことで、マイナスブルーが255に達するまで増加します。