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

Ответ 1

Я думал, что вы ищете " анимацию Progress Bar Animation"? попробуйте это: я верю, что вы ищете - горизонтальное загрузочное движение прогресса в 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);
});

Ответ 2

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

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

Поскольку jQuery не будет анимировать фоновый градиент, я анимировал промежуток в нем, и я использую параметр step, чтобы каждый раз менять градиентные остановки. Это означает, что любые изменения 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

Ответ 3

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

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

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

Ответ 5

• Имена переменных JavaScript не могут иметь тире, это должно быть backgroundColor.
• У вас 'red', поэтому он ничего не изменит. Измените строку на 'blue'.

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

Ответ 6

В свете предваряющих коментов (изменение фонового цвета для backgroundColor) вам также нужен плагин JQuery Colors, я сделал тест и без него не работает.

Поместите это на голову:

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

Ответ 7

попробуйте под кодом

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

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