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