我是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>

我只是得到一个空白的白色页面,没有错误的铬控制台。
谢谢!

最佳答案

既然您已经在使用CSS3,为什么不使用CSS3 transitions来更改背景色呢?
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一样。Demo here at jsFiddle
(添加了Firefox和WebKit的供应商前缀,还需要通过JavaScript添加CSS)

10-05 20:38
查看更多