移行がrgbaで正常に動作しない

Question

私は、製品に関するいくつかの情報を読むことができるように、リンクをクリックするとオーバーレイが画像の上に来るようにするプロジェクトがあります。

：私はそうのように、情報を持つdiv要素や絵を持っているdivの内側の白い背景を持ってこれを行うためには

：私は探しています効果は、このようなものです

 <div id="leftWindow"> 
     <a href="notalink.html" id="infoButton">+ Information</a> 
     <div id="info" class="notVisible"> 
      Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product 
     </div> 
     </div> 

情報を持つdiv要素は「notVisible」のクラスを持っていると私はそうのように、0.7の不透明度を持つ別のクラスを持っている：

#info { 
    background-color: white; 
    transition: opacity 1.5s ease-in-out; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 342px; 
    height: 516px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 10px; 
} 

.visibleIsh { 
    opacity: .7; 
} 

ときもしCリンク上なめる、いくつかのJavaScriptクラスを入れ替え：

$(document).on('click', '#infoButton', function(e){ 
    e.preventDefault(); 
    $("#info").removeClass("notVisible").addClass("visibleIsh"); 

}); 

これは動作しますが、問題は、テキストがまた、私はしたくない不透明度を失っていることです。

CSS：これを解決するために、私はそうのように、RGBAの代わりに、不透明度を使用し

.visibleIsh { 
    background-color: rgba(255,255,255,.7); 
} 

#info { 
    background-color: rgba(255,255,255,1); 
    transition: background-color 1.5s ease-in-out; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 342px; 
    height: 516px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 10px; 
} 

そして、私はあなたがGIFで見ることができるバグの動作を取得します。どんな助けもありがたい。ありがとう

Answer 1

現在、あなたは何をしているのかは、背景色が薄れているだけです。このアプローチを使用して、テキストは常に表示されます。あなたの最初のGIFのようにしたい場合は、最初に背景の不透明度を.7で設定して、#info要素全体を隠すようにしてください。次に、jQueryを使用して、クリック時に要素全体をフェードインできます。よし

$(document).on('click', '#infoButton', function(e){ 
 
    e.preventDefault(); 
 
    $("#info").fadeIn(1500); 
 

 
});

#info { 
 
    display:none; 
 
    background-color: rgba(255,255,255,.7); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 342px; 
 
    height: 516px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="leftWindow"> 
 
\t <a href="notalink.html" id="infoButton">+ Information</a> 
 
\t <div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product 
 
\t </div> 
 
</div>

、のが@eithedその仮定で正しいですし、CSSクラスではなく、jQueryを使ってこれをしたいと仮定しましょう。 opacityはDOMから要素を非表示にしないため、z-indexプロパティが重要です（z-index要素は重要です）#info要素がそれをカバーしているため、+ Informationリンクをクリックできません）。

$(document).on('click', '#infoButton', function(e){ 
 
    e.preventDefault(); 
 
    $("#info").addClass('visible'); 
 
});

#info { 
 
    opacity:0; 
 
    background-color: rgba(255,255,255,.7); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 342px; 
 
    height: 516px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
    transition:all 1.5s; 
 
    z-index:-1; 
 
} 
 
    #info.visible { 
 
    opacity:1; 
 
    z-index:10; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="leftWindow"> 
 
\t <a href="notalink.html" id="infoButton">+ Information</a> 
 
\t <div id="info">Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product 
 
\t </div> 
 
</div>