Animieren mein HTML-Element zu einer anderen Hintergrundfarbe.

Question

Ich möchte mein HTML-Element in eine andere Hintergrundfarbe ändern lassen, aber ich möchte, dass es einen verblassenden Übergang hat.

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); 
} 

Ich habe einige Probleme in der 5. Zeile. Etwas funktioniert hier nicht und mein Code bricht. Ist das der richtige Weg dies zu tun/sollte ich fadeIn() (und wie) verwenden?

Answer 1

Nach Beschreibung der animate Methode

Eigenschaften, die animiert werden können:

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 

So, Hintergrund-Farbe kann nicht animiert werden. Sie können jedoch die transition Eigenschaft für Element, das Sie benötigen, ernennen. Dann können Sie die Farbe Ihres Elements ändern, es wird mit der integrierten Browseranimation animiert.

Wie die

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>