bootstrap divの内容をゆっくり変更する方法

Question

ボタンクリック（onClickを使用しています）でコンテンツを変更するhtmlページがあります。私はそれが正常に動作している。

ここでは、ボタンをクリックしたときにテキストや背景色などがゆっくり（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;