如何更改緩慢啓動div的內容

Question

我有一個html頁面，更改一些按鈕點擊（我使用onClick）上的內容。我有它工作正常。

現在我想嘗試添加一些效果，以便單擊按鈕時，文本，背景顏色等應該緩慢（3-5秒）更改。它在引導中認爲它被稱爲淡化效果。

我可以通過這裏修改我現有的代碼實現這一點：

function myFunction() { 
 
    document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.'; 
 
    document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)'; 
 
    
 
    document.body.style.background = '#ffc0cb'; 
 
    document.getElementById("my-content").style.backgroundColor = '#db7093'; 
 
    document.body.style.color = 'pink';  
 
}

body { 
 
    background-color: #fff8dc; 
 
\t font: Verdana, Helvetica, sans-serif; 
 
\t color: maroon; 
 
    } 
 

 
    #my-content { 
 
    background-color: #ffdead; 
 
\t margin: 200px 50px 100px 50px; 
 
\t border-radius: 10px; 
 
    } 
 
    
 
    .quote { 
 
    margin: 0px 50px 0px 50px; 
 
    text-align: center; 
 
    } 
 
    
 
    .quoteBy { 
 
    margin: 0px 25px 0px 0px; 
 
\t text-align: right; 
 
    } 
 
    
 
    .buttonLine {  
 
    margin: 50px 0px 0px 0px;  
 
    } 
 
    
 
    #newQuoteButton { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
\t margin: 0px 0px 50px 450px; \t 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div id="my-content"> 
 
    <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1> 
 
    <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4> 
 
\t <div class="buttonLine"> 
 
\t <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button> 
 
\t </div> 
 
    </div> 
 
    
 
    <footer> 
 
    <p class="text-center">Compiled by: Someones Name</p>  
 
    </footer> 
 
</div>

Answer 1

只是一些過渡屬性添加到身體。見我的例子。我希望它能幫助你。

function myFunction() { 
 
    document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.'; 
 
    document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)'; 
 
    
 
    document.body.style.background = '#ffc0cb'; 
 
    document.getElementById("my-content").style.backgroundColor = '#db7093'; 
 
    document.body.style.color = 'pink';  
 
}

body { 
 
    transition: all 1.5s ease-in-out; // ADD SOME TRANSITION 
 
    background-color: #fff8dc; 
 
\t font: Verdana, Helvetica, sans-serif; 
 
\t color: maroon; 
 
    } 
 

 
    #my-content { 
 
    background-color: #ffdead; 
 
\t margin: 200px 50px 100px 50px; 
 
\t border-radius: 10px; 
 
    } 
 
    
 
    .quote { 
 
    margin: 0px 50px 0px 50px; 
 
    text-align: center; 
 
    } 
 
    
 
    .quoteBy { 
 
    margin: 0px 25px 0px 0px; 
 
\t text-align: right; 
 
    } 
 
    
 
    .buttonLine {  
 
    margin: 50px 0px 0px 0px;  
 
    } 
 
    
 
    #newQuoteButton { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
\t margin: 0px 0px 50px 450px; \t 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div id="my-content"> 
 
    <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1> 
 
    <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4> 
 
\t <div class="buttonLine"> 
 
\t <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button> 
 
\t </div> 
 
    </div> 
 
    
 
    <footer> 
 
    <p class="text-center">Compiled by: Someones Name</p>  
 
    </footer> 
 
</div>

Answer 2

使用transition身體的財產，我的內容，idQuote，idQuoteBy像

-webkit-transition-duration: all 5s; 
    transition-duration: all 5s;