带有jqueryui的彩色动画

我正在尝试制作一个游戏，当HP工具栏向下滑动时，颜色应该从绿色变为黄色，从橙色变为红色。但是，当我只是将代码从绿色改为红色时，HP栏会变成棕色，然后逐渐变为红色。我怎样才能改变它以适应我的需要？我尝试过添加这些

{backgroundColor:“yellow”}{backgroundColor:“orange”}

，但没有效果。您可以在这里查看：，输出

---

HTML

你可以用一个新的

这样，您可以使用不同的颜色指定多个步骤

只需添加额外的供应商前缀即可

---

如果希望动画在特定时间出现，可以将动画属性添加到选择器中，如

#hp_bar.animate

：

然后，无论何时发生动画，您都可以将

animate

类添加到元素中：

$("#hp_bar").addClass('animate').animate({width: "0px"}, 10000);

使用CSS3动画可能是要走的路，但是如果你仍然想使用jQuery UI，你可以使用分立动画并链接动画调用来强制中间颜色（但是注意，这样做会在中间造成暂停，因为它不是在一个动画中整个间隔上的均匀减速）。:

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
$（“#hp_栏”）。设置动画({
宽度：“50%”，
背景颜色：“黄色”
}制作动画({
宽度：“0px”，
背景颜色：“红色”
}, 5000);
});
#游戏包装器{
宽度：960px；
/*左边距：480px*/
}
#高压电棒{
高度：24px；
宽度：500px；
背景色：#00CC00；
边界半径：5px；
文本对齐：居中；
}
#hp_包装器{
高度：24px；
宽度：540px；
边界半径：5px；
文本对齐：居中；
边框：1px纯色灰色；
利润上限：-8px；
左边距：10px；
}
#hp_量表{
字体大小：10px；
字体重量：轻；
左边距：10px；
利润上限：-3px
}









0…5…10…15…20…25…30…40…50…60…70…80…90…100
惠普


这是一位杰出的领袖，他是一位伟大的领袖。
这是一位杰出的领袖，他是一位伟大的领袖。
这是一位杰出的领袖，他是一位伟大的领袖。
keyframes代表什么？如何使HP条再次变长（200像素）？我尝试了
.css（“宽度”、“200px”）
和
.addClass（“健康药剂”）
。两者都不起作用
.health\u potion{width:200px；}
1+我不知道你可以链接这样的动画。。美好的
$(document).ready(function() {
  $("#tabs").tabs();
  $("#hp_bar").animate({width: "0px", backgroundColor: "red"}, 10000);
})

#hp_bar {
  -webkit-animation: 10s colorFade forwards;
  animation: 10s colorFade forwards;
}
@keyframes colorFade {
  0% { background-color: green;}
  33% { background-color: yellow; }
  66% { background-color: orange; }
  100% { background-color: red; }
}
@-webkit-keyframes colorFade {
  0% { background-color: green;}
  33% { background-color: yellow; }
  66% { background-color: orange; }
  100% { background-color: red; }
}

#hp_bar.animate {
  -webkit-animation: 10s colorFade forwards;
  animation: 10s colorFade forwards;
}

$("#hp_bar").addClass('animate').animate({width: "0px"}, 10000);

$("#hp_bar").animate({
    width: "50%",
    backgroundColor: "yellow"
  }, 5000).animate({
    width: "0px",
    backgroundColor: "red"
  }, 5000);
});