Question

我找到了这个不错的动画进度条教程：

http://www.cssflow.com/snippets/animated-progress-bar/demo

但是进度条没有使用jquery，教程也没有告诉你如何将多个按钮链接到进度条。所以在搜索之后我找到了这个教程：

http://www.jcode.ninja/id/8561710

我现在只是简单地使用上面教程中的代码，看看我是否能让它运转起来。

我的问题是你如何以与第一个教程相同的方式为进度设置动画？是否可以应用以绿色开始然后渐变为橙色然后渐变为红色的渐变。我可以在photoshop中做到这一点，这不是一个问题，但你可以将它添加为进度条＆＃34;皮肤＆＃34;而不是默认的灰色？

提前致谢

Answer 1

我使用了第一个教程并创建了一个JSfiddle： https://jsfiddle.net/LgfcwxLu/

你应该做的是将.progress css添加到渐变：

.progress {
   padding: 4px;
   background: #5fff32; /* Old browsers */
   background: -moz-linear-gradient(left,  #5fff32 0%, #ff9730 50%, #ff0000 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5fff32), color-stop(50%,#ff9730), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* IE10+ */
   background: linear-gradient(to right,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fff32', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
 }

您可以使用此工具创建渐变： http://www.colorzilla.com/gradient-editor/

如果有帮助，请告诉我？

Answer 2

您可以使用css3过渡并更改背景颜色。您设置过渡，然后通过仅更改背景颜色，动画执行。检查这个小提琴：http://jsfiddle.net/en2cb2vq/

CSS代码：

.square {
    width: 50px;
    height: 50px;
  transition: background-color 0.5s ease;
  background-color: red;
}
.square.green {
  background-color: green;
}

HTML代码：

<a href="#">click me</a>
<div class="square"></div>

Javascript（使用jQuery）：

$("a").click( function() {
 $(".square").addClass("green"); 
    return false;
});

Answer 3

这将是重复问题已经问过的问题，尝试搜索并实现它，不要问这样的问题，如果代码中有错误意味着你可以发布问题， http://stackoverflow.com/questions/5047498/how-do-you-animate-the-value-for-a-jquery-ui-progressbar

Answer 4

您可以使用Transition的CSS .ui-progressbar-value为该栏设置动画。

.ui-progressbar-value{
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

注意：Transition不是跨浏览器。参考文献：http://www.w3schools.com/css/css3_transitions.asp

一个工作示例：

http://jsfiddle.net/y2mg8ejk/

IE8 / 9后备

使用旧浏览器，您可以使用和其他approch。 jQuery UI在他的代码中有color animation：

我改变我的小提琴使用jquery而不是转换：

看看：http://jsfiddle.net/y2mg8ejk/2/

jQuery UI - 色彩动画 [doc] ：http://jqueryui.com/animate/

您可以在旧版浏览器中使用此功能，将transition与其他浏览器一起使用。

Answer 5

您可以简单地将彩色进度条中的样式应用到jQuery UI进度条，包括条纹。在下面的jsfiddle中，我获取了必要的css，并将样式表中的.progress-bar类名更改为.ui-progressbar-value。要更改颜色，只需使用jQuery内联更改颜色或为每种颜色添加类，然后使用jQuery切换类。

See the fiddle。它并不完美，但会给你一个想法。

动画jQuery进度条

5 个答案:

一个工作示例：

IE8 / 9后备