Question

我正在使用下面的脚本，以便在3 div之间进行转换。转换工作精细淋浴，当新的div加载时，它推动旧的div。我在div上使用位置相对，我无法改变它。

有没有办法告诉脚本要等到旧的div在我加载新的$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(2000) .next() .fadeIn(2000) .end() .appendTo('#slideshow'); }, 1000);之前不可见？

＆＃13;

/*
Welcome Section
---------------------------------------*/

#aboutContainer {
  position: relative;
  height: 100%;
  width: 100%;
  border: 2px solid green;
}
.welcome-section {
  margin-top: 0px;
  position: relative;
  border: 2px solid green;
}
.welcome-section img {
  width: 100%;
}
.welcome-intro {
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
  -ms-transform: translate(-50%, -40%);
  -o-transform: translate(-50%, -40%);
  transform: translate(-50%, -40%);
  z-index: 2;
  text-align: center;
  width: 68%;
  text-transform: uppercase;
}
.welcome-intro .intro-line {
  line-height: 0px;
  font-weight: 900;
  margin-bottom: 0.83333333333333em;
  text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
}
.welcome-intro .intro-line {
  opacity: 1;
  -webkit-transition: 600ms all;
  -o-transition: 600ms all;
  transition: 600ms all;
  -webkit-transform: translate(0, -60px);
  -ms-transform: translate(0, -60px);
  -o-transform: translate(0, -60px);
  transform: translate(0, -60px);
  color: rgba(0, 125, 183, 1);
}
.pace-done .welcome-intro .intro-line,
.no-js .welcome-intro .intro-line {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.welcome-intro .storeBtn {
  opacity: 1;
  width: 150px;
  -webkit-transition: 600ms all;
  -o-transition: 600ms all;
  transition: 600ms all;
  -webkit-transform: translate(0, -30px);
  -ms-transform: translate(0, -30px);
  -o-transform: translate(0, -30px);
  transform: translate(0, -30px);
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
  cursor: pointer;
  opacity: 0.7;
}
.welcome-intro .storeBtn:hover {
  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -o-filter: invert(100%);
  filter: invert(100%);
  -webkit-transition: 600ms all;
  -o-transition: 600ms all;
  transition: 600ms all;
  opacity: 0.7;
}
.pace-done .welcome-intro .btn-ql,
.no-js .welcome-intro .btn-ql {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.welcome-intro #push {
  color: white;
  line-height: 60px;
}
/*Services Section
---------------------------------------*/

#services-section.services-section {
  background-color: #000;
  position: relative;
  padding: 10px;
  width: 220px;
  height: 30px;
  border: 2px solid red;
}
@media all and (max-width: 768px) {
  .welcome-section {
    margin-top: 50px;
  }
  .welcome-intro .storeBtn {
    width: 100px;
  }
}
@media all and (max-width: 600px) {
  .welcome-intro {
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -30%);
    -o-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
  }
  .welcome-intro .storeBtn {
    position: relative;
    top: -10px !important;
  }
  .welcome-intro .banTitle {
    font-size: 25px !important;
  }
  .welcome-intro #push {
    line-height: 20px;
    font-size: 20px !important;
  }
  .welcome-intro .intro-line {
    font-size: 14px;
  }
}
@media all and (max-width: 420px) {
  .welcome-intro .storeBtn {
    width: 70px;
  }
  .welcome-intro {
    position: absolute;
    top: 90%;
    left: 50%;
    -webkit-transform: translate(-50%, -10%);
    -ms-transform: translate(-50%, -10%);
    -o-transform: translate(-50%, -10%);
    transform: translate(-50%, -10%);
  }
  .welcome-intro .storeBtn {
    position: relative;
    top: -30px !important;
  }
  .welcome-intro .banTitle {
    font-size: 17px !important;
  }
  .welcome-intro .intro-line {
    font-size: 12px;
  }
  .welcome-intro #push {
    line-height: 15px;
    font-size: 15px !important;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="aboutContainer">
  <div id="slideshow">

    <div id="welcome-section" class="welcome-section">
      <img src="http://www.scil-ilc.org/wp-content/uploads/2014/11/clouds-sky-header-2069-1024x300.jpg">

      <div class="welcome-intro">
        <h1 class="intro-line banTitle">aaaaa</h1>
        <h3 style="color: rgba(0,0,0,0.8)" class="intro-line">aaaaaa</h3>


      </div>
      <!-- welcome-intro -->

    </div>

    <div id="welcome-section" class="welcome-section">
      <img src="https://d3n8a8pro7vhmx.cloudfront.net/alexsteffen/pages/121/attachments/original/1421212038/Rose-Pavilion-panoramic-1024x300.jpeg?1421212038">

      <div class="welcome-intro">
        <h1 class="intro-line banTitle">bbbbbb</h1>
        <h3 style="color: rgba(0,0,0,0.8)" class="intro-line">bbbbb</h3>


      </div>
      <!-- welcome-intro -->

    </div>

  </div>

  <div id="services-section" class="services-section">
    <div class="container">
      <div class="row">

        <div class="widget widget_service-widget">
          <div class="col-md-4 col-sm-6 service">

            <div class="service-icon-wrap">
              <img src="" alt="" class="service-icon">
            </div>

            <div class="service-text">
              <h4>Multipurpose Design</h4>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

            </div>
            <div class="clearfix"></div>
          </div>
          <!-- service -->

        </div>
        <div class="widget widget_service-widget">
          <div class="col-md-4 col-sm-6 service">

            <div class="service-icon-wrap">
              <img src="" alt="" class="service-icon">
            </div>

            <div class="service-text">
              <h4>Easy To Customize</h4>
              <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque.</p>

            </div>
            <div class="clearfix"></div>
          </div>
          <!-- service -->

        </div>
        <div class="widget widget_service-widget">
          <div class="col-md-4 col-sm-6 service">

            <div class="service-icon-wrap">
              <img src="" alt="" class="service-icon">
            </div>

            <div class="service-text">
              <h4>Responsive Design</h4>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

            </div>
            <div class="clearfix"></div>
          </div>
          <!-- service -->

        </div>
      </div>
      <!-- row -->
    </div>
    <!-- container -->

  </div>
</div>

＆＃13;

{{1}}

＆＃13;

JS - div之间的过渡

0 个答案: