jquery - jqueryを使用して背景色をフェードイン/フェードアウトするにはどうすればよいですか?

Question

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

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

Answer 1

この正確な機能 (メッセージをハイライトするための 3 秒間のグロー) は、ハイライト効果として jQuery UI に実装されています。

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

色と期間は可変です

Answer 2

I know that the question was how to do it with Jquery, but you can achieve the same affect with simple css and just a little jquery...

For example, you have a div with 'box' class, add the following 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;
}

and then use AddClass function to add another class with different background color like 'box highlighted' or something like that with the following css:

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

I am a beginner and maybe there are some disadvantages of this method but maybe it'll be helpful for somebody

Here's a codepen: https://codepen.io/anon/pen/baaLYB

Answer 3

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

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

Answer 4

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 )

Answer 5

これと同様のことを実現するために、非常に単純な jQuery プラグインを作成しました。私は本当に軽量なもの (縮小された 732 バイト) が欲しかったので、大きなプラグインや UI を含めることは問題外でした。まだ端が少し荒いので、フィードバックを歓迎します。

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

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

Answer 6

シンプルな 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

Answer 7

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