2

我是 JQuery 的新手，所以我很可能做错了。当我尝试这样做时：

jQuery

$(document).ready(function () {
  spectrum();

  function spectrum() {
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.foor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

    $('body').animate({
      background: '-webkit-linear-gradient(-45deg, ' + hue + ' 0%, ' + hue + ' 100%)'
    }, 2500, spectrum);
  }
});

HTML

<!DOCTYPE html>

<html lang="en">  
  <head>
    <meta charset="utf-8" />
    <title>Moody Colors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
  </head>

  <body></body>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
  <script src="js/moody.js"></script>
</html>

我只是得到一个空白页，Chrome 控制台中没有错误。

谢谢！

4

1 回答 1

3

既然你已经在使用 CSS3，为什么不使用CSS3 过渡来改变背景颜色呢？

JavaScript：

$(document).ready(function () {

    spectrum();

    function spectrum() {
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';           
        $('body').css('background-color', '-webkit-linear-gradient(-45deg, ' + hue + ' 0%, ' + hue + ' 100%)');
        setTimeout(spectrum, 2500);
    }
});​

CSS：

body {
    transition: background-color 2.5s;
    -moz-transition: background-color 2.5s;
    -webkit-transition: background-color 2.5s;
}

和您现在使用的 HTML 相同。在 jsFiddle 演示

（为 Firefox 和 WebKit 添加了供应商前缀，您还需要使用通过 JavaScript 添加的 CSS 来执行此操作）

于 2012-09-01T01:30:23.573 回答