divをフェードアウトするときのテキストmantain

Question

私はYouTubeのビデオフレームでiframe apiを再生しています。私は何をしたいのですか？私は背景色を持っています。beofreビデオが始まり、背景色はdiv全体をカバーする必要があります。また、テキストが中心にある必要があります、私の問題はそのテキストに関連しているので、ビデオが開始するとき、私は背景色でdivを消すとき、私はテキストをmantainしたい、テキストは常にそこにする必要がありますそのようなことをしていますか？私は既に私の背景色のdivとビデオを持っていますが、私はdivのテキストを扱うことはできません。

HTML

<section class="content_section bg_fixed white_section bg2"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <div id="over"> 
        <p>&nbsp;</p> 

        <p>&nbsp;</p> 

        <p>&nbsp;</p> 

        <p>&nbsp;</p> 

        <p>&nbsp;</p> 
        <div class="title-wrapper main_title text-center centered upper"> 
         <h2><span class="line"></span>Simple solutions for complex problems</h2> 
        </div> 

        <div class="description4 centered"> 
         <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br> 
Usability and simple deployment are the key words.</b></p> 

         <p dir="ltr">&nbsp;</p> 

         <p dir="ltr">&nbsp;</p> 

         <p dir="ltr">&nbsp;</p> 
        </div> 
       </div> 

      <div id="video_overlays"></div> 

      <div class="container" style="position: relative;"> 


      </div> 
      <div id="player" width="100%" height="100%" style="z-index:-1"> 
      </div> 
     </div> 
    </section> 

Answer 1

div要素の透明度は、そのすべての子の透明性に影響を与えるので、あなたがそれをフェードインする場合、内部のだ何もフェード。テキストを含む別のdivを作成して、divの下のコードに背景色で置きます。次に、相対的な配置を使用して、背景の真上に配置します。

$('.bg').animate({'opacity': 0}, 2000);

.bg { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 

 
.text { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: -200px; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bg"> 
 

 
</div> 
 
<div class="text"> 
 
    Your text here. 
 
</div>