11

I have a div which has some text content( eg: My Name ) and the div is in RED background colour and a button.

My need :

If I have clicked the button , I need to change the background of a div from RED to BLUE like Progress bar for 10 seconds.Something like,

start from 0 sec

=

==

===

====

=====

======

=======

========

=========

==========

end with 10 seconds

I have to change the bgColor gradually from start to end for upto 10 secs.

So I have used the JQuery animate() method .But I have no luck to do that.

What I have tried :

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

If this is not possible , can anyone please suggest me some plugin's to do that.

Hope our stack users will help me.

3
  • 2
    Step 1: check your browser's console for syntax errors. Step 2: read the .animate() doco and you'll see it doesn't work on colours unless you use a plugin.
    – nnnnnn
    Oct 3, 2013 at 13:14
  • Does your button have in id?
    – Flea777
    Oct 3, 2013 at 13:14
  • @KitePlayer I've added another solution that I think matches your specification.
    – George
    Oct 17, 2013 at 10:30

11 Answers 11

11

I thought your looking for a "Progress Bar Animation"? try this: i believe its what your looking for - the progress bar's horizontal loading motion in a jsfiddle here:

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

with a few more elements you are able to simulate that easily using the same tech everyone else is using here... 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);
});
9
+50

Background gradient loader - possibly more appropriate

You could also use the background gradient as the loader. Of course, jQuery doesn't natively support choosing correct CSS prefixes, so it may have to be tweeked to work in older browsers. But it'll work nicely where your browser supports linear-gradient.

Since jQuery won't animate a background gradient, I've animated a span within it and am using the step option to change the gradient stops each time. This means that any duration or easing changes to the animate() will apply to the gradient as well:

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


Original answer

background-color is the CSS style, you are targeting the property of the javascript object, which in this case, is backgroundColor. You'll want to change the color name as well.

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

JSFiddle

4
  • But I need it to animate as a loading process horizontally Oct 3, 2013 at 13:29
  • @KitePlayer I have made an update. @ thedownvoter, care to share some comments?
    – George
    Oct 3, 2013 at 13:40
  • 1
    Thanks for a quick update. But I already have some content in the div . So only I am trying to change the background color. Oct 3, 2013 at 13:44
  • +1 for your answer. Oct 22, 2013 at 6:40
4

Or you could do the math and do the color change. 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
>             });            
>         }
>     })
>      });
2

This can be done using span changing its width over the time. Here is the working fiddle. The code is displayed below. Only the mandatory styles are displayed here.

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%");
});
1
  1. JavaScript variable names can't have dashes, it should be backgroundColor.
  2. You have 'red', so it will not change anything. Change the string to 'blue'.
$("button").click(function(){ 
      $('#myDivId').animate({ backgroundColor: 'blue' }, 10000);
});
1

Furthemore of the previus coments (change background-color for backgroundColor) you also need the plugin Jquery Colors, I made a test and without it don't work.

Put this on the head:

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

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

And Let me know it's working or not...waiting for your reply .......

3
  • 1
    Including jQuery UI only for color animations is a very bad decision.
    – kapa
    Oct 3, 2013 at 13:38
  • 1
    No, it is not true. There are color animation plugins available.
    – kapa
    Oct 3, 2013 at 14:10
  • 1
    You can customise jQuery UI on the website to only include the modules you need, but it might still be overkill and a small plugin could be more appropriate. It's only a good choice if your project uses the library already.
    – DarthJDG
    Oct 4, 2013 at 16:55
1

If you are able to use latest CSS (which mean no stupid old browser), you may use CSS3's gradient function

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

Example at: http://jsfiddle.net/hkdennis2k/ebaF8/2/

1

you can use this code:

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

You need to use the jQuery.Color() plugin for background-color animation.

1

Any particular reason you want to do this in jQuery as opposed to css3?

Bootstrap has a pretty nifty way of achieving this -> http://getbootstrap.com/components/#progress-animated

The .progress-bar class has a css3 transition set on the width property, so as you move between 0% & 100%, any updates to the width are smoothly animated. It also uses a css3 animation to animate the background gradient (striped pattern).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.