jqueryのスクロールに表示され、彼らは効果のこのような固定方法を互いに

Question

後の各要素は、私が思っていた：

スクロールで

それはフェードインで画像1を示し

<div class="div1"></div>へのフェードインと画像2よりも、

：、などなど、フェードインと画像3よりも..私はこれまででてきた

何..

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/