jquery - jquery中的颜色过渡动画

Question

如何使用 jQuery 在颜色之间制作动画，即淡出一种颜色并淡入另一种颜色。

我知道这可以用 CSS3 关键帧来完成，但是这在 w3schools 提到的 Internet Explorer 中不起作用。我想要一个可以在所有浏览器中工作的标准方法。

在 stackoverflow 中搜索时，它提到需要一个 jQuery 颜色插件。有谁知道任何更简单的方法吗？

Answer 1

你可以试试这个：现场演示

CSS

#content {
    width: 100%; 
    background: #eff6f4;
    transition: background 4s linear;
    -webkit-transition: background 4s linear;
    -moz-transition: background 4s linear;
}

jQuery

$('#content').css('background', '#C89CBD');

这将在 4 秒内改变背景颜色。

更新

如果你需要 IE，那么你可以有这样的东西：

$('#content').fadeOut(500, function(){
    $(this).css('background', bg).fadeIn(2000);
});

它不会那么好，但有效。现场演示

Answer 2

颜色插件非常简单，我不确定你想象的更简单。您需要做的就是包含另一个脚本：

<script src="jquery.color.min.js"></script>

然后为颜色设置动画：

  $(foo).animate({
      backgroundColor: "#00FF00"
  }, 1000 );