web-dev-qa-db-ja.com

jQueryのプログレスバーのように背景色をアニメーション化する

divにテキストコンテンツがあり（eg： My Name）、divは[〜＃〜]赤[〜＃〜]background colourとボタン。

私の必要性：

ボタンをクリックした場合は、divの背景を赤から青のようにProgress barのように10秒に変更する必要があります。

0秒から開始

=

==

===

====

=====

======

=======

========

=========

==========

10秒で終了

bgColorを徐々に最初から最後まで最大10秒間変更する必要があります。

だから私はJQuery animate（）メソッドを使用しましたが、それを行う運はありません。

私が試したこと：

  $("button").click(function(){ 
        $('#myDivId').animate({background-color:'blue'},10000);
  });

これが不可能な場合は、誰かが私にそれを行うためのいくつかのプラグインを提案できますか？.

スタックユーザーが私を助けてくれることを願っています。

jquerycssjquery-uiprogress-barjquery-effects
11
Human Being

「プログレスバーアニメーション」をお探しですか？これを試してください：私はあなたが探しているものを信じています-ここのjsfiddleでのプログレスバーの水平方向の読み込み動作：

http://jsfiddle.net/c78vF/6/

さらにいくつかの要素を使用すると、他の人がここで使用しているのと同じ技術を使用して、それを簡単にシミュレートできます... jquery ui etc

html：

<button>Button</button>
<div id='myDivId'>
    <div class="progress"></div>
    <div class="content">
        DIV
    </div>
</div>

css：

#myDivId{
    background:red; 
    color:white; 
    padding:10px; 
    overflow:hidden; 
    position:relative;
}

.content{
    z-index:9;
    position:relative;
}
.progress{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:blue;
    left:0px;
    top:0px;
}

js：

$("button").click(function(){ 
      $('.progress').animate({ width: '100%' }, 10000);
});
11
Joe

バックグラウンドグラデーションローダー-おそらくより適切

バックグラウンドグラデーションをローダーとして使用することもできます。もちろん、jQueryは正しいCSSプレフィックスの選択をネイティブにサポートしていないため、古いブラウザーで機能するように調整する必要がある場合があります。ただし、ブラウザが _linear-gradient_ をサポートしている場合はうまく機能します。

JQueryは背景のグラデーションをアニメーション化しないため、その中のスパンをアニメーション化し、stepオプションを使用してグラデーションの停止を毎回変更しています。これは、animate()に対するdurationまたはeasingの変更がグラデーションにも適用されることを意味します。

_$("button").click(function(){    
    $('#loadContainer span').animate({width:'100%'}, {
        duration:10000,
        easing:'linear',
        step:function(a,b){
            $(this).parent().css({
                background:'linear-gradient(to right, #0000ff 0%,#0000ff '+a+'%,#ff0000 '+a+'%,#ff0000 100%)'
            });
        }
    });
});
_

JSFiddle

元の回答

_background-color_はCSSスタイルであり、javascriptオブジェクトのプロパティ（この場合はbackgroundColor）をターゲットにしています。色の名前も変更する必要があります。

_$("button").click(function(){ 
    $('#myDivId').animate({backgroundColor:'blue'},10000);
});
_

JSFiddle

9
George

または、計算を行って色を変更することもできます。 http://jsfiddle.net/rustyDroid/WRExt/2/

> $("#btn").click(function(){
>     $('#bar').animate({ width: '300px' }, 
>     {
>         duration:10000,
>         easing:'linear',
>         step:function(a,b){
>             var pc = Math.ceil(b.now*255/b.end);
>             var blue = pc.toString(16);
>             var red = (255-pc).toString(16);
>             var rgb=red+"00"+blue;
>             $('#bar').css({
>                 backgroundColor:'#'+rgb
>             });            
>         }
>     })
>      });
4
rustyDroid

これは、スパンを使用して、時間の経過とともに幅を変更することで実行できます。 これが作業中のフィドルです 。コードを以下に示します。ここには必須のスタイルのみが表示されます。

HTML

<div class="red-button">
    <span class="bg-fix"></span>  //this is the only additional line you need to add
    <p>Progress Button</p>
</div>
<button class="click-me">Click Me</button>

CSS

.red-button {
    position: relative;
    background: red;
}
span.bg-fix {
    display: block;
    height: 100%;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: blue;
    transition: width 10s ease-in-out;
}
p {
    position: relative;
    z-index: 1
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

jQuery

$("div.red-button").click(function () {
  $('span.bg-fix').css("width", "100%");
});
2
Mahesh Samudra

このコードを使用できます：

jsFiddleはここにあります

HTML：

<button>Button</button>
<div id='container'>
    <div class="progress"></div>
    <div class="content">
        test Content
    </div>
</div>

CSS：

#container{
    background:#eee;
    color:#555; 
    padding:10px; 
    overflow:hidden; 
    position:relative;
}
.content{
    z-index:9;
    position:relative;
}
.progress{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:tomato;
    left:0px;
    top:0px;
}
.filling{
animation: fill 10s linear;
-webkit-animation: fill 10s; /* Safari and Chrome */
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}

@keyframes fill
{
0%   {background: red; width:0%;}
25%  {background: yellow; width:25%;}
50%  {background: blue; width:50%;}
75%  {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}

@-webkit-keyframes fill /* Safari and Chrome */
{
0%   {background: red; width:0%;}
25%  {background: yellow; width:25%;}
50%  {background: blue; width:50%;}
75%  {background: green; width:75%;}
100% {background: lightgreen; width:100%;}
}

JQuery：

$("button").click(function(){ 
      $('.progress').addClass("filling").css("background","lightgreen").width("100%");
});
1
Mohsen Safari
  1. JavaScript変数名にはダッシュを含めることはできません。backgroundColorにする必要があります。
  2. 'red'があるので、何も変更されません。文字列を'blue'に変更します。
$("button").click(function(){ 
      $('#myDivId').animate({ backgroundColor: 'blue' }, 10000);
});
1
Doorknob

以前のコメント（backgroundColorのbackground-colorを変更）のさらに、プラグインJquery Colorsも必要です。テストを行いましたが、それがないと機能しません。

これを頭に置いてください：

  <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.0.min.js"></script>
1
Vishkey

背景色のアニメーションにはjQuery.Color（）プラグインを使用する必要があります。

1
irvy

Css3ではなくjQueryでこれを実行したい特別な理由はありますか？

Bootstrapには、これを実現するためのかなり気の利いた方法があります-> http://getbootstrap.com/components/#progress-animated

.progress-barクラスでは、widthプロパティにcss3トランジションが設定されているため、0％と100％の間を移動すると、幅の更新がスムーズにアニメーション化されます。また、css3アニメーションを使用して、背景のグラデーション（縞模様）をアニメーション化します。

1
1nfiniti

最新のCSSを使用できる場合（つまり、愚かな古いブラウザーがない場合）、CSS3のグラデーション機能を使用できます。

$("#bar").mousemove(function (e) {
    var now=e.offsetX/5;
    $(this).css('backgroundImage', 'linear-gradient(to right, #00f 0%,#00f ' + now + '%,#f00 ' + now + '%,#f00 100%)');
}).click(function(e){
    e.preventDefault();
    var start=new Date().getTime(),
        end=start+1000*10;
    function callback(){
        var now=new Date().getTime(),
            i=((now-start) / (end-start))*100;
        $("#bar").css('backgroundImage', 'linear-gradient(to right, #00f 0%,#00f ' + i + '%,#f00 ' + i + '%,#f00 100%)');
        if(now<end){
            requestAnimationFrame(callback, 10);
        }
    };
    requestAnimationFrame(callback, 10);
});

例： http://jsfiddle.net/hkdennis2k/ebaF8/2/

1
Dennis C

以下のコードを試してください

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>


     $(document).ready(function(){

        $("#button").click(function(){ 
            $('#myDivId').css("background-color","BLUE");
            $( "#effect" ).animate({
            backgroundColor: "yellow", }, 1000 );
      });
    });

</script>


<div id="myDivId" style="width:120;height:130;background-color:RED;text-align: center;">Text Area</div>

<input type="button" id="button" class="" name="click" value="click" >

そして、それが機能しているかどうかを私に知らせてください...あなたの返事を待っています.......

1
Mandip Darji