將css背景更改爲帶有動畫的jquery的隨機背景

因此，我有一個隨機引號生成器，每次用戶單擊新引用按鈕時，包含引用更改的body和mainDiv的背景。我想要一個動畫，我希望它能夠淡出，新的背景會在100ms內消失。我做了一些閱讀，但我的情況是不同的，因爲我的背景是從數組隨機選擇math.random。這是我的代碼。將css背景更改爲帶有動畫的jquery的隨機背景

<body> 
    <div id="mainDiv" class="colorChange"> 
    <button id="newQuote" class="btn btn-danger">New Quote</button> 
    <div id="targetP"></div> 
    </div> 
</body> 

var divBackground, bodyBackground,quoteButton,targetP,number,sec; 
    targetP=$("#targetP").val(); 
    $("#newQuote").click(function() { 
    number=Math.floor((Math.random() * 10) + 1); 
    sec=Math.floor((Math.random() * 10) + 1); 
    $("#mainDiv").css("background-color",colors[number]); 
    $("body").css("background-color",colors[sec]); 
    $("#targetP").html(quotes[number]); 
});

我如何動畫的背景顏色（身體和主DIV），所以前面的背景100ms的淡出，並在100ms的新進來的變化？謝謝

來源

2016-09-11 eclipseIzHere

你可以在CSS中添加轉換到「#mainDiv」和「body」來改變背景顏色和淡出，並在「targtP」div。

來源

2016-09-11 17:07:46 edonbajrami

下一種顏色從陣列中隨機選擇的，並存儲在一個變量中。我如何把下一個顏色轉換爲CSS？ – eclipseIzHere

只需給下面的div「#mainDiv」和「body」轉換代碼： body， #mainDiv { -webkit-transition：background-color .3s ease-in; -moz-transition：background-color .3s ease-in; -ms-transition：background-color .3s ease-in; transition：background-color .3s ease-in; } – edonbajrami

yay它的工作原理，但我仍然不能確切地理解css如何從下一個背景知道到底是什麼 – eclipseIzHere

我在那裏看不到任何顏色。基本上我所做的就是創建一個帶有顏色的數組（當然，把你的10種顏色），然後我告訴函數從數組中選擇哪種顏色。爲什麼10？它的最大數量可以是數字和秒。爲了便於理解和閱讀，我將這些作爲孩子編寫。希望它有幫助。

<script> 
 
    var divBackground, bodyBackground, quoteButton, targetP, number, sec; 
 
var colors = ["red","green","blue","black","navy","pink","red","silver","blue","black","silver","pink"]; 
 
function myFunction(){ 
 
    number = Math.floor((Math.random() * 10) + 1); 
 
    sec = Math.floor((Math.random() * 10) + 1); 
 
    document.getElementById('mainDiv').style.backgroundColor = colors[number]; 
 
    document.getElementById("body").style.backgroundColor = colors[sec]; 
 
}; 
 
</script>

<style> 
 
body{ 
 
    transition: 1s; 
 
} 
 
#mainDiv{ 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: 1s; 
 
} 
 
</style>

</head> 
 
    <body id="body"> 
 
    <div id="mainDiv" class="colorChange"> 
 
     <button id="newQuote" class="btn btn-danger" onclick="myFunction()">New Quote</button> 
 
     <div id="targetP"></div> 
 
    </div>

來源

2016-09-11 17:41:52

將css背景更改爲帶有動畫的jquery的隨機背景

回答

相關問題