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 に答える