-webkit-linear-gradient jquery和var

我是JQuery的新手，所以我很可能做錯了。當我嘗試這樣做：-webkit-linear-gradient jquery和var

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控制檯沒有錯誤。

謝謝！

來源

2012-09-01 Human_USB

你是想爲固體背景顏色或漸變？ –

如果您使用的是最新版本的jQuery（1.8），它會自動添加CSS前綴，因此您不需要在jQuery代碼中使用'-webkit-'speficy。您仍然需要在CSS代碼中使用它，但您也應該始終指定非前綴版本以及其他瀏覽器的前綴版本。不這樣做會讓你的網站中斷一些用戶。 – Spudley

由於您已經在使用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以及）

來源

2012-09-01 01:30:23 ThoKra

謝謝。我會試一試並報告。：）再次謝謝你！ –

你給了什麼工作，但與「webkit線性漸變」的過渡是非常生澀，並不光滑。看一看，[示例]（https://s3.amazonaws.com/js-test-colors/）。謝謝！ –

訪問示例時，出現Access Denied xml頁面。 – ThoKra

-webkit-linear-gradient jquery和var

回答

相關問題