Question

我有这个div字段：

<div id="idNumber1" style="color: #ffcc00">hello</div>

所以，我们在屏幕上看到黄色你好。

我想做什么：我希望黄色的你好变红，然后淡出黄色。我怎么能这样做？

谢谢你的回答。

Answer 1

正如其他人所指出的那样，animate()函数本身不会改变颜色。但是，它可以与CSS3过渡组合以实现所需的效果：

#idNumber1 {
  color: #ffcc00;
  -webkit-transition: color 0.5s linear;
}

function flash(id) {
  $(id).css('color', '#ff0000');
  setTimeout(function() {
    $(id).css('color', '#ffcc00');
  }, 500);
}

这样调用，这会将颜色更改为红色超过500毫秒，然后将其更改为黄色超过500毫秒：

flash('#idNumber1');

当然，idNumber1不是最具描述性的，你可能想要更好地考虑一些事情，或者使用类名来表示具有此行为的元素。您还可能希望包含全部或部分完整的浏览器前缀转换：

-webkit-transition: color 1s linear;
-moz-transition: color 1s linear;
-o-transition: color 1s linear;
-ms-transition: color 1s linear;
transition: color 1s linear;

还有很多其他方法可以做到这一点，这里只有一个。

jQuery从一种颜色到另一种颜色

1 个答案: