かフェードウ背景色のjqueryを使う?

StackOverflow https://stackoverflow.com/questions/967815

質問

どんなフェードテキストコンテンツ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を使って影響を与え得ることができ

たとえば、あなたは、「箱」クラスを持つ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;
}

とし、「ボックスがハイライト」や次のCSSでそのような何かのように異なる背景色で別のクラスを追加するためにAddClass機能を使用します：

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

私は初心者です、多分この方法のいくつかの欠点があるが、多分それは、誰かのために役立つことでしょう。

ここでcodepenです： https://codepen.io/anon/pen/baaLYBする

通常は、しかしため、任意のCSSプロパティを操作するために .animate（）のメソッドを使用することができます背景色は、あなたはカラープラグインを使用する必要があります。あなたはこのプラグインが含まれたら、色を変更する$('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;}
}

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

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

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

あなたはここにプラグインをチェックアウトすることができます。 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

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素子（青色）で出発して、黄色のハイライトで始まり、青マイナスです。それが255に達するまで、10+値を設定するにvar unBlueマイナスブルーをインクリメントする。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top