像 jQuery 中的进度条一样为背景颜色设置动画答案

【问题标题】：Animate background color like a progress bar in jQuery像 jQuery 中的进度条一样为背景颜色设置动画
【发布时间】：2013-10-10 04:59:18
【问题描述】：

我有一个 div，其中包含一些文本内容（eg: My Name），并且 div 是 RED strong> background colour 和一个按钮。

我的需要：

如果我点击了按钮，我需要将 div 的背景从 RED 更改为 BLUE，例如 Progress bar 持续 10 秒。类似， p>

从 0 秒开始

=

==

===

====

=====

======

=======

========

=========

===========

以 10 秒结束

我必须从头到尾逐渐改变 bgColor 最多 10 秒。

所以我使用了 JQuery animate() 方法。但是我没有运气。

我尝试过的：

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

如果这是不可能的，谁能给我推荐一些插件来做到这一点。

希望我们的堆栈用户能帮助我。

【问题讨论】：

第 1 步：检查浏览器控制台是否有语法错误。第 2 步：阅读 .animate() 文档，您会发现除非您使用插件，否则它不适用于颜色。
你的按钮有id吗？
@KitePlayer 我添加了另一个我认为符合您的规范的解决方案。

标签： jquery css jquery-ui progress-bar jquery-effects

【解决方案1】：

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

您也可以使用背景渐变作为加载器。当然，jQuery 本身并不支持选择正确的 CSS 前缀，因此它可能必须经过调整才能在较旧的浏览器中工作。但它会在你的浏览器supports linear-gradient 的地方很好地工作。

由于 jQuery 不会为背景渐变设置动画，因此我在其中设置了一个跨度动画，并且每次都使用 step 选项来更改渐变停止点。这意味着对animate() 的任何duration 或easing 更改也将应用于渐变：

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

【讨论】：

但我需要它作为水平加载过程的动画
@KitePlayer 我已经更新了。 @thedownvoter，愿意分享一些 cmets 吗？
感谢您的快速更新。但我已经在 div 中有一些内容。所以只有我想改变背景颜色。
+1 为您解答。

【解决方案2】：

您想在 jQuery 中而不是在 css3 中执行此操作有什么特别的原因吗？

Bootstrap 有一个非常棒的方法来实现这一点 -> http://getbootstrap.com/components/#progress-animated

.progress-bar 类在 width 属性上设置了 css3 过渡，因此当您在 0% 和 100% 之间移动时，对宽度的任何更新都会平滑动画。它还使用 css3 动画来为背景渐变（条纹图案）设置动画。

【讨论】：

【解决方案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】：

这可以使用 span 随时间改变其宽度来完成。 Here is the working fiddle。代码如下所示。此处仅显示强制样式。

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】：

您需要使用 jQuery.Color() 插件来制作背景色动画。

【讨论】：

【解决方案6】：

您可以使用此代码：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我认为您在寻找“进度条动画”？试试这个：我相信它是你要找的 - 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;
}

js:

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

【讨论】：

【解决方案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" >

让我知道它是否有效......等待您的回复......

【讨论】：

只为彩色动画包含 jQuery UI 是一个非常糟糕的决定。
不，这不是真的。有可用的彩色动画插件。
您可以在网站上自定义 jQuery UI 以仅包含您需要的模块，但这可能仍然是矫枉过正，一个小插件可能更合适。如果您的项目已经使用该库，这只是一个不错的选择。

【解决方案10】：

除了之前的评论（将背景颜色更改为背景颜色），您还需要插件 Jquery Colors，我做了一个测试，没有它就无法工作。

把这个放在头上：

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

【讨论】：

【解决方案11】：

JavaScript 变量名不能有破折号，应该是backgroundColor。
你有'red'，所以它不会改变任何东西。将字符串更改为'blue'。

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

【讨论】：