divをネストするとjQueryが機能しなくなる

Question

ネストされたdivとクラスの適用に関する質問があります。私のプロジェクトでは、idの "content"を持つdivがあり、その内部に "imagewrap"というIDのdivがあり、それ自体に画像やその他の要素が含まれています。ここではHTMLです：

<div id="content"> 

    <div id="imagewrap" class="notVisible"> 
     <img src="Images/Image1.jpg" id="front" /> 

     <div id="previous" class="buttons" onclick="change(-1);"></div> 

     <div id="next" class="buttons" onclick="change(1);"></div> 
    </div> 

    </div> <!-- end of content --> 

私はそのイメージがフェードインしたいので、私はdivの「imagewrap」に「notVisible」のクラスを追加していると私はいくつかのjQueryのは、このクラスを削除し、目に見える「のクラスを追加しました"遅れて。 JSとCSS：

CSS

#content { 
    height: 100%; 
    width: 100vw; 
    background-color: white; 
    min-height: 580px; 
    text-align: center;} 

#imagewrap{ 
    position: relative; 
    z-index: 5; 
    display: inline-block; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;} 

.notVisible { 
    opacity: 0;} 

.visible { 
    opacity: 1; 
    transition: opacity 0.7s ease-in-out;} 

JS：予想通り、この作品

function showPicture() { 

$("#imagewrap").removeClass("notVisible"); 

$("#imagewrap").addClass("visible"); 

} 

    setTimeout(showPicture, 7000); 

。ただ、私の代わりに、「コンテンツ」のdivにクラス「notVisible」を追加し、そのような関数のshowPicture（）変更しようとした、テストするには：

function showPicture() { 

    $("#content").removeClass("notVisible"); 

    $("#content").addClass("visible"); 

    } 

を、これも画像がフェードインで動作します 問題。

<section id="container"> 
    <div id="content"> 

     <div id="imagewrap" class="notVisible"> 
      <img src="Images/Image1.jpg" id="front" /> 

      <div id="previous" class="buttons" onclick="change(-1);"></div> 

      <div id="next" class="buttons" onclick="change(1);"></div> 
     </div> 

     </div> <!-- end of content --> 
    </section> <!--end of container--> 

を、私はこれを行う際に、画像がフェードイン停止します。私はそうのように、私は今、「コンテナ」のIDとタグに私の「コンテンツ」div要素をネストすることによって、私のHTMLを再構築したいということです遭遇します代わりに "container" divに "notVisible"のクラスを適用し、それに応じてshowPicture（）関数を変更しようとしましたが動作しません。なぜこれは機能しないのですか？御時間ありがとうございます。

Answer 1

この記事を読んでWhat is the difference between <section> and <div>?

sectionは、一般的な要素ではありません。 sectionをdivに交換しても問題ありません。

<div id="container"> 
 
    <div id="content"> 
 

 
     <div id="imagewrap" class="notVisible"> 
 
      <img src="Images/Image1.jpg" id="front" /> 
 

 
      <div id="previous" class="buttons" onclick="change(-1);"></div> 
 

 
      <div id="next" class="buttons" onclick="change(1);"></div> 
 
     </div> 
 

 
     </div> <!-- end of content --> 
 
    </div> <!--end of container-->