像jQuery中的进度条一样对背景色进行动画处理 [英] Animate background color like a progress bar in jQuery

问题描述

我有一个 div ，其中包含一些文本内容(例如:我的名字)，并且 div 以 RED strong> background colour和一个按钮.

我的需要:

如果我单击了按钮，则需要将div的背景从 RED更改为BLUE (像Progress bar一样)持续10秒钟. >

从0秒开始

=

==

===

====

=====

======

=======

========

=========

==========

以10秒结束

我必须从头到尾逐渐更改 bgColor 长达10秒.

所以我使用了 JQuery animate()方法，但是我没有运气做到这一点.

我尝试过的方法:

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

如果这不可能，那么任何人都可以建议我一些插件来实现.

希望我们的堆栈用户会帮助我.

解决方案

我认为您正在寻找"进度栏动画"吗?试试这个:我相信它是您想要的-进度条在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);
});

I have a div which has some text content( eg: My Name ) and the div is in RED background colour and a button.

My need :

If I have clicked the button , I need to change the background of a div from RED to BLUE like Progress bar for 10 seconds.Something like,

start from 0 sec

=

==

===

====

=====

======

=======

========

=========

==========

end with 10 seconds

I have to change the bgColor gradually from start to end for upto 10 secs.

So I have used the JQuery animate() method .But I have no luck to do that.

What I have tried :

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

If this is not possible , can anyone please suggest me some plugin's to do that.

Hope our stack users will help me.

解决方案

I thought your looking for a "Progress Bar Animation"? try this: i believe its what your looking for - the progress bar's horizontal loading motion in a jsfiddle here:

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

with a few more elements you are able to simulate that easily using the same tech everyone else is using here... 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);
});

这篇关于像jQuery中的进度条一样对背景色进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！