用jQuery实现类似进度条的背景色动画效果

Question

我有一个带有一些文本内容（例如：My Name）和按钮的div，其背景颜色为红色。我的需求：

如果我点击按钮，我需要将

的背景从红色更改为蓝色，就像进度条一样，在10秒钟内完成。类似于:

从0秒开始

=

==

===

====

=====

======

=======

========

=========

==========

在10秒钟结束

我必须在10秒钟内逐渐地将bgColor从开始到结束进行更改。

因此，我使用了JQuery animate()方法。但是我没有成功。

我尝试过的：

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

如果不可能的话，有没有人可以建议我一些插件来做到这一点。 希望我们的堆栈用户会帮助我。

- Human Being

---

步骤1：检查您的浏览器控制台是否存在语法错误。步骤2：阅读 .animate() 文档，您会发现它不支持颜色动画，除非您使用插件。 - nnnnnn

你的按钮有ID吗？ - Flea777

@KitePlayer，我添加了另一种解决方案，我认为符合您的规格要求。 - George

Answer 1

我认为您正在寻找"进度条动画"？请尝试这个链接：我相信这是您要找的——进度条的水平加载效果——在这个jsfiddle中：

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

再加上一些元素，您可以轻松地使用与其他人一样的技术来模拟它...例如jquery ui等。

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;
}

JavaScript:

$("button").click(function(){ 
      $('.progress').animate({ width: '100%' }, 10000);
});

- Joe

Answer 2

背景渐变加载器 - 可能更适合

您也可以使用背景渐变作为加载器。当然，jQuery本身不支持选择正确的CSS前缀，因此可能需要进行调整以在旧版浏览器中运行。但是，在浏览器支持linear-gradient的情况下，它将很好地工作。

由于jQuery不会动画化背景渐变，因此我在其中动画化了一个span，并使用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

---

Translated answer

background-color是CSS样式，你正在针对JavaScript对象的属性进行操作，而在这种情况下，该属性是backgroundColor。你还需要更改颜色名称。

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

JSFiddle

- George

---

但我需要它作为一个水平加载过程进行动画处理。 - Human Being

@KitePlayer 我已经更新了。@thedownvoter，能否分享一些评论？ - George

谢谢您的快速更新。但是我已经在div中有一些内容了。所以我只想改变背景颜色。 - Human Being

对于你的回答给一个**+1**。 - Human Being

Answer 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
>             });            
>         }
>     })
>      });

- rustyDroid

Answer 4

这可以通过改变span的宽度来实现。 这里是可行的示例。以下是代码。这里只显示必要的样式。

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

- Mahesh Samudra

Answer 5

你需要使用jQuery.Color()插件进行背景颜色动画。

- irvy

Answer 6

任何特定原因让你想要使用jQuery而不是css3吗？

Bootstrap有一种非常巧妙的方法来实现这个功能-> http://getbootstrap.com/components/#progress-animated .progress-bar类在width属性上设置了一个css3过渡，因此当您在0％和100％之间移动时，宽度的任何更新都会平滑地动画化。 它还使用css3动画来动画化背景渐变（条纹图案）。

- 1nfiniti

Answer 7

1. JavaScript变量名不能有破折号，应该使用backgroundColor。
2. 你使用的是'red'，所以不会有任何变化。将字符串改为'blue'。

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

- tckmn

Answer 8

另外，根据之前的评论（将background-color更改为backgroundColor），您还需要Jquery Colors插件。我进行了测试，没有它不起作用。

将此放在头部：

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

- Vishkey

Answer 9

尝试以下代码。

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

请告诉我是否正常工作，等待您的回复......

- Mandip Darji

---

仅为颜色动画而包含jQuery UI是一个非常糟糕的决定。 - kapa

不，这并不是真的。有可用的颜色动画插件。 - kapa

您可以在网站上自定义jQuery UI，仅包含您需要的模块，但这可能仍然过于复杂，一个小型插件可能更合适。只有在您的项目已经使用该库时，它才是一个好选择。 - DarthJDG

Answer 10

如果你能使用最新的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/

- Dennis C