HTML要素を別の背景色にアニメーション化します。

Question

html要素の色を別の背景色に変更したいのですが、フェードする移行が必要です。

function changeBackground() { 
    console.log("changeBackground() function is working"); 
    var backgrounds = ["navy", "blue", "aqua", "teal", "olive", "green", "lime", "yellow", "orange", "red", "maroon", "fuchsia", "purple"]; 
    var randomBG = backgrounds[Math.floor(Math.random() * backgrounds.length)]; 
    $("html").animate({backgroundColor: randomBG}, "slow"); 
    console.log(randomBG); 
} 

5行目に問題があります。ここの何かがうまくいかず、私のコードが壊れています。これを行う正しい方法ですか/私はfadeIn（）を使用する必要があります（そしてどのように）？

Answer 1

をアニメーション化することができanimate方法

プロパティの説明によると：

backgroundPositionX 
backgroundPositionY 
borderWidth 
borderBottomWidth 
borderLeftWidth 
borderRightWidth 
borderTopWidth 
borderSpacing 
margin 
marginBottom 
marginLeft 
marginRight 
marginTop 
outlineWidth 
padding 
paddingBottom 
paddingLeft 
paddingRight 
paddingTop 
height 
width 
maxHeight 
maxWidth 
minHeight 
minWidth 
fontSize 
bottom 
left 
right 
top 
letterSpacing 
wordSpacing 
lineHeight 
textIndent 

ので、背景色をアニメーション化することができません。ただし、必要な要素に対してはtransitionプロパティを指定できます。次に、ブラウザのビルトインアニメーションでアニメーションされる要素の色を変更することができます。その

function changeBackground() { 
 
    console.log("changeBackground() function is working"); 
 
    var backgrounds = ["navy", "blue", "aqua", "teal", "olive", "green", "lime", "yellow", "orange", "red", "maroon", "fuchsia", "purple"]; 
 
    var randomBG = backgrounds[Math.floor(Math.random() * backgrounds.length)]; 
 
    $("html").css('background-color',randomBG);} 
 
    
 
$('#click').click(function() {changeBackground()});

html { 
 
    transition: background-color 5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="click">Click to change the colour</button>