Using a Background Gradient as a Loader

An alternative option is to utilize the background gradient as the loader. Although jQuery may require some adjustments to work in older browsers that do not support CSS prefixes, it can be an effective solution where CSS gradients are supported.

Since jQuery does not directly animate a background gradient, one approach is to animate a span within it and utilize the step option to modify the gradient stops dynamically. This enables any changes made to the duration or easing of the animation to 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%)'
            });
        }
    });
});

View Example on JSFiddle

Original Answer

The correct CSS style property is backgroundColor, which differs from background-color. Therefore, ensure you adjust both the target property in your JavaScript object and the color name accordingly.

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

View Original Answer on JSFiddle

Alternatively, you have the option to calculate and implement a color transition. http://jsfiddle.net/creativeCoder/ZXUgh/9/

> $("#button").on("click", function(){
>     $('#progress').animate({ width: '400px' }, 
>     {
>         duration:8000,
>         easing:'linear',
>         step:function(a,b){
>             var percentage = Math.ceil(b.now*255/b.end);
>             var green = percentage.toString(16);
>             var red = (255-percentage).toString(16);
>             var rgb=red+"00"+green;
>             $('#progress').css({
>                 backgroundColor:'#'+rgb
>             });            
>         }
>     })
>      });

To achieve this effect, you can utilize a span element whose width changes gradually over time. For a demonstration, check out the interactive example here. Below is the essential code snippet with only the necessary styles provided.

HTML

<div class="red-button">
    <span class="bg-fix"></span>  //simply add this additional line
    <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. In JavaScript, variable names cannot contain dashes; use backgroundColor instead.
2. The value is currently set to 'red', which will not produce any change. Update it to 'blue'.

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

In addition to the previous comments (changing background-color to backgroundColor), it is also necessary to have the Jquery Colors plugin installed. I conducted a test and it did not work without it.

Include this script in the head section of your HTML document:

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

Check out the code snippet below:

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

Please test this code and let me know if it's functioning as expected. Looking forward to your feedback!

If you have the capability to utilize the most up-to-date CSS (without having to worry about outdated browsers), you can take advantage of 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);
});

See an example here: http://jsfiddle.net/hkdennis2k/ebaF8/2/

To implement this feature, simply follow these steps:

Access jsFiddle demo here

HTML structure:

<button>Click Me</button>
<div id='wrapper'>
    <div class="bar"></div>
    <div class="text">
        Some Text
    </div>
</div>

CSS styling:

#wrapper{
    background:#eee;
    color:#555; 
    padding:10px; 
    overflow:hidden; 
    position:relative;
}
.text{
    z-index:9;
    position:relative;
}
.bar{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:tomato;
    left:0px;
    top:0px;
}
.fill{
animation: fillBar 10s linear infinite;
}

@keyframes fillBar
{
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 function:

$("button").click(function(){ 
      $('.bar').addClass("fill").css("background","lightgreen").width("100%");
});

To achieve animated background colors, incorporating the jQuery.Color() plugin is essential.

Is there a specific reason for choosing jQuery over css3 for this task?

If you're interested, Bootstrap offers a great method for achieving this -> http://getbootstrap.com/components/#progress-animated

The .progress-bar class utilizes css3 transitions on the width property, resulting in smooth animations when transitioning between 0% and 100%. It also incorporates css3 animations for the background gradient (striped pattern).