更改顯示div的背景顏色

我有三個div顯示/隱藏一個接一個。我想要的是，當一個特定的div顯示時，頁面的背景顏色會發生變化。此外，由於transition-duration，更改順利進行。更改顯示div的背景顏色

正如您可能猜到的那樣，gradient-low顏色將與low div同時顯示，其他顏色也會同時顯示。一個困難我是不同的div不會以相同的順序每次顯示（即low DIV之後，可能是一個high DIV，然後通過moderate，等，這是隨機的。）

$(document).ready(function() { 
 
    $("#low").on(function() { 
 
    $("#low").css("gradient-low"); 
 
    $("#moderate").hide(); 
 
    $("high").hide(); 
 
    }); 
 
});

.gradient-low { 
 
    background: #ddd6f3; 
 
    background: -webkit-linear-gradient(to left, #faaca8, #ddd6f3); 
 
    background: linear-gradient(to left, #faaca8, #ddd6f3); 
 
    transition-duration: 0.4s; 
 
} 
 

 
.gradient-moderate { 
 
    background: #ff6e7f; 
 
    background: -webkit-linear-gradient(to left, #ff6e7f, #bfe9ff); 
 
    background: linear-gradient(to left, #ff6e7f, #bfe9ff); 
 
    transition-duration: 0.4s; 
 
} 
 

 
.gradient-high { 
 
    background: #EECDA3; 
 
    background: -webkit-linear-gradient(to left, #EF629F, #EECDA3); 
 
    background: linear-gradient(to left, #EF629F, #EECDA3); 
 
    transition-duration: 0.4s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="low"> 
 
    <h3 class="level">Low</h3> 
 
</div> 
 
<div id="moderate" style="display: none;"> 
 
    <h3 class="level">Moderate</h3> 
 
</div> 
 
<div id="high" style="display: none;"> 
 
    <h3 class="level">High</h3> 
 
</div>

我是jQuery/javascript的初學者，你可能會猜測我有一些困難。任何有關該過程的幫助將不勝感激。

來源

2017-02-27 mattvent

如何的div出現一個接一個？你對'on（）的調用缺少事件名稱，所以實際上不會做任何事情 –

事情是完全隨機的（這是一個隨機改變音樂強度的音樂播放器）。所以在一個「低」div後，可以有一個「溫和」的div，但也是一個「高」div。這是我不明白應該使用jQuery代碼的主要原因。 – mattvent

你需要類似的東西

function showLow() { 
    $('body').addClass('gradient-low').removeClass('gradient-moderate').removeClass('gradient-high'); 
    $('#moderate, #high').hide(); 
    $('#low').show(); 
}

來源

2017-02-27 09:12:06

infiniteLoop = false //設置動畫是否應該繼續觸發嘗試添加這對你的CSS它幫助我。

來源

2017-02-27 09:18:21

你應該根據什麼.gradient- *類身體顯示或隱藏div。

下面是一個示例，級別每3秒更改一次。 changeLevel函數有一個if else語句，用於設置div的顯示屬性，並在主體中添加或刪除gradient- *類。

$(document).ready(function() { 
 
    $("body").addClass ("gradient-low"); 
 
    function changeLevel() { 
 
    if ($("body").hasClass ("gradient-low")) { 
 
     $("#low").css ("display", "none"); 
 
     $("#moderate").css ("display", "block"); 
 
     
 
     $("body").removeClass ("gradient-low"); 
 
     $("body").addClass ("gradient-moderate"); 
 
    } 
 
    else if ($("body").hasClass ("gradient-moderate")) { 
 
     $("#moderate").css ("display", "none"); 
 
     $("#high").css ("display", "block"); 
 
     
 
     $("body").removeClass ("gradient-moderate"); 
 
     $("body").addClass ("gradient-high"); 
 
    } 
 
    else { 
 
     $("#high").css ("display", "none"); 
 
     $("#low").css ("display", "block"); 
 
     
 
     $("body").removeClass ("gradient-high"); 
 
     $("body").addClass ("gradient-low"); 
 
    } 
 
    setTimeout(changeLevel, 3000); 
 
    } 
 
    
 
    setTimeout(changeLevel, 3000); 
 
});

.gradient-low { 
 
    background: #ddd6f3; 
 
    background: -webkit-linear-gradient(to left, #faaca8, #ddd6f3); 
 
    background: linear-gradient(to left, #faaca8, #ddd6f3); 
 
    transition-duration: 0.4s; 
 
} 
 

 
.gradient-moderate { 
 
    background: #ff6e7f; 
 
    background: -webkit-linear-gradient(to left, #ff6e7f, #bfe9ff); 
 
    background: linear-gradient(to left, #ff6e7f, #bfe9ff); 
 
    transition-duration: 0.4s; 
 
} 
 

 
.gradient-high { 
 
    background: #EECDA3; 
 
    background: -webkit-linear-gradient(to left, #EF629F, #EECDA3); 
 
    background: linear-gradient(to left, #EF629F, #EECDA3); 
 
    transition-duration: 0.4s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="low"> 
 
    <h3 class="level">Low</h3> 
 
</div> 
 
<div id="moderate" style="display: none;"> 
 
    <h3 class="level">Moderate</h3> 
 
</div> 
 
<div id="high" style="display: none;"> 
 
    <h3 class="level">High</h3> 
 
</div>

來源

2017-02-27 11:10:26

更改顯示div的背景顏色

回答

相關問題