jQueryで表示なしの場合、別の要素の可視性を変更します

Question

特定の要素がdisplay:noneの場合、別の要素の表示プロパティを変更する必要があります。

if ($("#first-layer").css('display') === 'none') { 
 
    $("#second-layer").removeAttr("visibility"); 
 
}

#second-layer { 
 
    color: black; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 150px; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    visibility: hidden; // here I have to change by jQuery 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div id="first-layer"> 
 
    <div id="header-elements"> 
 
     <div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"> </div> 
 
     <div id="typed-strings" class="text"> 
 
     <span class="animated fadeInUp" id="typed"></span> 
 
     <br/> 
 
     <span class="description animated fadeIn">Your weather in one place</span> 
 
     </div> 
 
    </div> 
 
    <div id="typed-strings"> 
 
    </div> 
 
    <div class="start"> 
 
     <button type="button" class="btn btn-primary btn-lg responsive-width button-      bg-clr animated fadeIn">Get Started</button> 
 
    </div> 
 
    </div> 
 
    <div id="second-layer">123</div> 
 

 
</header>

私は、インターネットからの解決策を試してみましたが、彼らは動作しませんでした。

Answer 1

あなたのコードは、現時点では何もしませんが、CSS宣言が検出について

もっと属性ではありませんので、あなたはおそらく

if ($("#first-layer").not(":visible")) { // or .is(":hidden") 
    $("#second-layer").show(); 
} 

または

$("#second-layer").css({visibility:visible}); 

で簡単に時間を持つことになりますここに Difference between :hidden and :not(:visible) in jQuery

Answer 2

使用する。jQuery(":hidden")

// if selector is none then 
if($('#first-layer').is(":hidden")){ 

    // alter second-layers visibility 
    $('#second-layer').css('visibility', 'visible'); 
}