Анимировать цвет фона, как индикатор выполнения в jQuery

фоновый градиентный загрузчик-возможно, более подходящий

вы также можете использовать градиент фона грузчиком. Конечно, jQuery изначально не поддерживает выбор правильных префиксов CSS, поэтому его можно настроить для работы в старых браузерах. Но он будет работать хорошо, где Ваш браузер поддерживает linear-gradient.

поскольку jQuery не будет анимировать градиент фона, я анимировал промежуток внутри него и использую изменение градиента останавливается каждый раз. Это означает, что любой duration или easing изменения animate() будет применяться и к градиенту:

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

или вы можете сделать математику и сделать изменение цвета. 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
>             });            
>         }
>     })
>      });

Это можно сделать используя пядь изменяя свою ширину над временем. вот рабочая скрипку. Код отображается ниже. Здесь отображаются только обязательные стили.

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. имена переменных JavaScript не могут иметь тире, это должно быть backgroundColor.
2. вы 'red', Так что это ничего не изменит. Измените строку 'blue'.

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

Furthemore из previus coments (изменить цвет фона для backgroundColor) вам также нужен плагин jQuery Colors, я сделал тест и без него не работает.

положите это на голову:

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

попробовать ниже код

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

и дайте мне знать, работает он или нет...ждем вашего ответа .......

Если вы можете использовать последний 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/

вы можете использовать этот код:

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

вам нужно использовать jQuery.Color () плагин для фоновой цветной анимации.

любая конкретная причина, по которой вы хотите сделать это в jQuery, а не css3?

Bootstrap имеет довольно изящный способ достижения этого -> http://getbootstrap.com/components/#progress-animated

The .класс прогресс-бара имеет CSS3-переход, установленный в свойстве width, поэтому при перемещении между 0% и 100% любые обновления ширины плавно анимируются. Он также использует анимацию css3 для анимации градиента фона (полосатый узор).