Question

我有一个关于嵌套div和应用类的问题。在我的项目中，我有一个ID为＆＃34;内容＆＃34;在它里面是一个id为＆＃34; imagewrap＆＃34;它本身包含和图像和一些其他元素。这是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 -->

我希望这个图片能够淡入，所以我添加了一个＆＃34; notVisible＆＃34;到div＆＃34; imagewrap＆＃34;我得到了一些jQuery删除这个类并添加了一个＆＃34;可见＆＃34;过了一会儿。 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);

这可以按预期工作。为了测试，我尝试添加类＆＃34; notVisible＆＃34;到div＆＃34;内容＆＃34;而是像这样改变函数showPicture（）：

 function showPicture() {

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

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

    }

这也适用于图像淡入。我遇到的问题是我现在想要通过嵌套我的＆＃34;内容＆＃34;来重构我的html。 id为＆＃34;容器＆＃34;的标签中的div，如下所示：

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

当我这样做时，图像停止淡入。我尝试应用＆＃34; notVisible＆＃34;到＃34;容器＆＃34;而不是相应地更改showPicture（）函数，它不起作用。为什么这不起作用？谢谢你的时间。

Answer 1

阅读这篇文章What is the difference between <section> and <div>?

section不是通用元素。将section替换为div，它应该有效。

＆＃13;

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

＆＃13;

嵌套div时jQuery停止工作

1 个答案: