Question

我想知道他们是如何修复这种效果的：

滚动到<div class="div1"></div>

显示淡入的图像1，淡入的图像2，淡入的图像等等。

http://www.neotokio.it/做到了这一点，但我似乎无法弄明白......

到目前为止我所拥有的是：

tiles = $(".test1").fadeTo(0, 0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(900,1);
    });
})

所以它出现在滚动上，到某个div，但我不知道如何修复它以在1 div中制作更多动画，如上所述。例如neotokio.it。

Answer 1

这几乎与你所寻找的一样，在我从div位置取下650你可能想要使用$(window).innerHeight()来获取视口的高度并从中进行计算。

风格：

body{
    height: 1000px; 
}

div#container{
    margin-top: 800px; 
    display:block; 
    height:50px; 
    width:300px;
 }

.tiles{
    display:inline-block; 
    height:40px; 
    width:90px; 
    opacity:0; 
    background-color:red;
}

HTML：

<div id="container">
         <div class="tiles">tile1 content</div>
         <div class="tiles">tile2 content</div>
         <div class="tiles">tile3 content</div>
</div>

脚本：

var divpos= $("#container").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= divpos-650) {          
          var animDelay = 0;
              $('.tiles').each(function(){
                  $(this).delay(animDelay).animate({
                      opacity:1
                   },500);
                   animDelay += 500;
              });
         clearInterval(interval);
   }
}, 250);

希望这会有所帮助 - 请参阅此处的演示：http://jsfiddle.net/24M3n/28/

jquery出现在滚动上，每个元素都出现在彼此之后

1 个答案: