divの表示時に背景色を変更します

Question

3つのdivが1つずつ表示/非表示されています。私が欲しいのは、ある特定のdivが表示されると、ページの背景色が変わるということです。さらに、変更はtransition-durationのおかげで円滑になりました。

gradient-lowの色はlow divと同時に表示され、他のものと同じものが表示されます。私が持っている一つの問題は、

$(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>

（すなわち low div要素は、その後 moderateなどによってそれはランダムです、 high DIVを続けることができます。）異なるのdivが同じ順序で毎回表示されていないということです

私はjQuery/javascriptの初心者ですが、私はいくつかの困難を抱えていると思います。このプロセスの助けに感謝します。

Answer 1

あなたはアニメーションが、それは私を助け、あなたのCSSにこれを追加すること 試してトリガーを続けるべきかどうかを設定することを

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

Answer 2

infiniteLoop = false //のようなものが必要になります。

Answer 3

• divを表示または非表示にするには、ボディにある.gradient- *クラスに基づいてください。

レベルは3秒ごとに変更されます。 changeLevel関数には、divのdisplayプロパティを設定し、bodyのgradient- *クラスを追加または削除するif elseステートメントがあります。 div要素が次々に登場しているどのように

$(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>