Animate Hintergrundfarbe wie ein Fortschrittsbalken in jQuery

Question

Ich habe eine div, die einigen Textinhalt hat (zB: My Namen) und die div ist in REDbackground colour und eine Schaltfläche.

Mein Bedürfnis:

Wenn ich auf die Schaltfläche geklickt haben, ich brauche den Hintergrund eines div von Rot zu Blau wie Progress bar für 10 Sekunden .Something wie

zu ändern Start von 0 sec

=

==

===

====

=====

======

=======

= =======

=========

==========

Ende mit 10 Sekunden

muß ich die bgcolor allmählich von Anfang ändern für bis zu 10 Sekunden zu beenden.

Also habe ich die JQuery animate() Methode verwendet. Aber ich habe kein Glück, das zu tun.

Was ich versucht habe:

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

Wenn dies nicht möglich ist, kann jemand bitte machen Sie mir einige Plugin, das zu tun.

Hoffe, dass unsere Stack-Benutzer mir helfen werden.

Answer 1

Ich dachte, Sie suchen nach einer "Progress Bar Animation"? versuchen Sie dies: ich glaube seine, was Sie suchen - der horizontalen Ladebewegung des Fortschrittsbalken in einem jsfiddle hier:

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

mit ein paar mehr Elemente Sie in der Lage sind, das simulieren leicht die gleiche Tech alle anderen mit ist hier verwenden ...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); 
}); 

Answer 2

Hintergrund Gradienten loader - möglicherweise geeignetere

Sie könnten auch die Hintergrundgradienten als Lader verwenden. Natürlich unterstützt jQuery nicht nativ die Auswahl von korrekten CSS-Präfixen, daher muss es möglicherweise angepasst werden, um in älteren Browsern zu funktionieren. Aber es wird gut funktionieren, wo Ihr Browser supports linear-gradient.

Da jQuery keinen Hintergrund-Farbverlauf animiert, habe ich einen Bereich darin animiert und verwende die Option step, um die Farbverlaufsstopps jedes Mal zu ändern.Dies bedeutet, dass alle duration oder easing Änderungen an der animate() dem Gradienten gilt auch:

$("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

---

Ursprüngliche Antwort

background-color ist der CSS-Stil, Sie sind Targeting auf die Eigenschaft des Javascript-Objekts, in diesem Fall backgroundColor. Sie sollten auch den Farbnamen ändern.

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

JSFiddle

Answer 3

1. JavaScript Variablennamen Striche nicht haben kann, sollte es backgroundColor sein.
2. Sie haben 'red', so wird es nichts ändern. Ändern Sie die Zeichenfolge in 'blue'.

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

Answer 4

Furthemore der previus coments (ändern Hintergrundfarbe für Backgroundcolor) das Plugin JQuery Farben auch brauchen, ich habe einen Test gemacht und ohne sie nicht funktionieren.

Setzen Sie dieses auf den Kopf:

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

Answer 5

Versuch unter Code

<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" > 

und lassen Sie mich wissen, dass es funktioniert oder nicht ... für Ihre Antwort warten .......

Answer 6

Wenn Sie in der Lage sind neueste CSS zu verwenden (whic h bedeuten keine dummen alten Browser) können Sie CSS3 der Gradientenfunktion

$("#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); 
}); 

Beispiel bei Verwendung: http://jsfiddle.net/hkdennis2k/ebaF8/2/

Answer 7

Sie diesen Code verwenden können:

jsFiddle is here

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%"); 
}); 

Answer 8

Sie benötigen die jQuery.Color() Plugin für Hintergrund-Farbe Animation verwenden.

Answer 9

Dies kann unter Verwendung von span durchgeführt werden, der seine Breite über die Zeit ändert. Here is the working fiddle. Der Code wird unten angezeigt. Nur die obligatorischen Stile werden hier angezeigt.

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%"); 
}); 

Answer 10

Oder Sie könnten die Mathematik tun und die Farbveränderung tun. im Gegensatz zu CSS3 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 
>    });    
>   } 
>  }) 
>  }); 

Answer 11

einen besonderen Grund Sie dies in jQuery zu tun?

Bootstrap hat eine ziemlich raffinierte Art und Weise, dies zu erreichen ->http://getbootstrap.com/components/#progress-animated

Die .progress-Bar-Klasse einen css3 Übergang von der Breiten Eigenschaft festgelegt ist, so, wie Sie zwischen 0% & 100% bewegen, alle Aktualisierungen Die Breite ist sanft animiert. Es verwendet auch eine CSS3-Animation, um den Hintergrundfarbverlauf (Streifenmuster) zu animieren.