web-dev-qa-db-ja.com

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

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

ポイントは、メッセージにユーザーの注意を引くことです。

jquerycssbackground-colorfade
90
mrblah

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

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

色と持続時間は可変です

88
micmcg

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

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

jQueryUIには、ユーザーにとっても役立つ組み込みの効果がいくつかあります。

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

87
user113716

私は質問が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

18
NoDisplayName

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

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

14
Ryan

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は、ループ内で適切に動作するために匿名関数にラップされます（ reason ）
9
user

ブラウザのサポートに応じて、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");
});
8
richfinelli

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

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

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

4
Dominic P

単純な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

3
Curtis Yallop

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

<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に達するまでマイナス青を増やします。

0
gordon