Question

我合并了一个window.scroll函数，可以在我的页面上启动动画时激活。我有三个不同的图像，看起来像这样：

图像

一旦我滚动到他们的div，我希望他们出现。但是，由于某种原因，如果我查看其中一个，整个序列都会开始。

我的窗口滚动功能如下所示：

$(function() {


 var oTop = $('.home-img-block', this).offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $('body').scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      imgDelaysSlide();
    }
  });
});

HTML看起来像这样：

 <div id="home-img-block-section">
  <div id="home-img-blocks">
    <div class="home-img-block fadeBlock1">
      <div data-content="FIND OUT MORE" class='home-img-container'>
        <img src="/images/test1.jpg">
        <div class="overlay"></div>
      </div>
      <div class="home-img-wording-blocks">
        <div class="home-img-wording-block-title">WEB DESIGN</div>
        <div class="home-img-wording-block-description">The OD team can see your web design visions brought
        to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
      </div>
    </div>
    <div class="home-img-block fadeBlock2">
      <div data-content="FIND OUT MORE" class='home-img-container'>
        <img src="/images/test2new.jpg">
        <div class="overlay"></div>
      </div>
      <div class="home-img-wording-blocks">
        <div class="home-img-wording-block-title">ECOMMERCE</div>
        <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal. 
        gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
      </div>
    </div>
    <div class="home-img-block fadeBlock3">
      <div data-content="FIND OUT MORE" class='home-img-container'>
        <img src="/images/test3new.jpg">
        <div class="overlay"></div>
      </div>
      <div class="home-img-wording-blocks">
        <div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
        <div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g  
        gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
      </div>
    </div>
  </div>

我的window.scroll函数中的this是否应该在我将鼠标悬停在当前div类上时启动这些动画？

var oTop = $('.home-img-block', this).offset().top - window.innerHeight; $(window).scroll(function() {

还有什么我可以试着去调出那个特定的div，而不是整个班级吗？

更新添加imgDelaysSlide功能

function imgDelaysSlide() {


 $('.fadeBlock1').delay(300).animate({
    'left': '0%'
  }, 700);
  $('.fadeBlock2').delay(800).animate({
    'left': '0%'
  }, 700);
  $('.fadeBlock3').animate({
    'left': '0%'
  }, 700);
}

window.scroll一次激活一个类

0 个答案: