jQuery UI 的彩色动画

Question

我正在尝试制作游戏，当 HP 条向下滑动时，颜色应该从绿色变为黄色、橙色变为红色。但是当我将代码从绿色变为红色时，HP 条变为棕色并且然后逐渐变为红色。我怎样才能改变它以满足我的需要？我试过添加这些 {backgroundColor: "yellow"} {backgroundColor: "orange"}，但它不起作用。你可以在这里查看：http://jsbin.com/duwozi/1/edit?html，输出

HTML

<div id="hp_wrapper">
  <div id="hp_bar">HP</div>
</div>

JS

$(document).ready(function() {
  $("#tabs").tabs();
  $("#hp_bar").animate({width: "0px", backgroundColor: "red"}, 10000);
})

Answer 1

您可以改用 CSS3 animation。

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

Updated Example

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

只需为 additional browser support 添加额外的供应商前缀。

如果您希望动画在特定时间发生，您可以将动画属性添加到选择器中，例如 #hp_bar.animate:

Example Here

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

那么只要动画应该出现，您就可以将 animate class 添加到元素中：

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

Answer 2

使用 CSS3 动画可能是可行的方法，但如果您仍想使用 jQuery UI，您可以使用离散动画并将动画调用强制中间颜色（但请注意，这样做会导致中间停顿，因为它不像一个动画那样在整个间隔内均匀减速）：

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

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

#game_wrapper {
  width: 960px;
  /* margin-left: 480px; */
}
#hp_bar {
  height: 24px;
  width: 500px;
  background-color: #00CC00;
  border-radius: 5px;
  text-align: center;
}
#hp_wrapper {
  height: 24px;
  width: 540px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid gray;
  margin-top: -8px;
  margin-left: 10px;
}
#hp_scale {
  font-size: 10px;
  font-weight: light;
  margin-left: 10px;
  margin-top: -3px
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="game_wrapper">
    <div id="tabs">
      <ul>
        <li><a href="#inv_tab">One</a>
        </li>
        <li><a href="#map_tab">Two</a>
        </li>
        <li><a href="#save_tab">Three</a>
        </li>
        <li>
          <p id="hp_scale">0....5....10....15....20....25.....30.........40.........50.........60.........70.........80.........90.........100</p>
          <div id="hp_wrapper">
            <div id="hp_bar">HP</div>
          </div>
        </li>
      </ul>
      <div id="inv_tab">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
      <div id="map_tab">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
      <div id="save_tab">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </div>
    </div>
  </div>
</body>

</html>

jQuery UI 的彩色动画

Color Animation With jQuery UI

html

css

jquery

jquery-ui