レスポンシブページの特定のポイントを一度通過した画像をアニメーション化してフェードインする方法は？

Question

イメージがビューポートに入ると、フェードインして左にスライドします。現時点でコードが適切に動作するようにすることに問題がありますが、jQueryがdivの高さに応じて動作するように変更する必要があるものも考えています。

コード

以下のjQuery

<script> 
    $(window).one("scroll", function() { 
     var currentScroll = $(window).scrollTop(); 
     if (currentScroll >= 700) 
      $('#iphone').fadeIn(1000).animate({ 
       left: '200px' 
      });  
    }); 
</script> 

HTML

<div class="col-md-4"> 
    <img src="/images/iPhone-6.png" height="250px" width="auto" id="iphone"> 
</div> 

ありがとうございます！

Answer 1

$(window).one("phone"... - "phone"はjQueryの有効なイベントではないと思います。

、ページのスクロールは、おそらくこのような何かを探している場合に発生させるイベントを取得しようとしている場合：

<script> 
     var iphonePosition = $('#iphone').offset().top; 

     $(window).one("scroll", function() { 
     var currentScroll = $(window).scrollTop(); 
     if (currentScroll >= iphonePosition) 
      $('#iphone').fadeIn(1000).animate({ 
      left: '200px' 
     });  
     }); 
</script> 

.one()のご使用は、このイベントが起こることを意味しますのでご注意ください関数の中で何が起こっても、最初のスクロールだけです。これは動作を希望されない場合は、ちょうどそうのような別のifに機能の根性を$(window).scroll(function() {...を使用してラップを検討：

<script> 
     var iphonePosition = $('#iphone').offset().top; 

     $(window).on("scroll", function() { 

     var currentScroll = $(window).scrollTop(); 

     if (currentScroll >= iphonePosition) { 
      $('#iphone').fadeIn(1000).animate({ 
       left: '200px' 
      }); 

      $(window).off(); //Our fade-in was triggered, unbind the event 
     } 

     }); 
</script> 

Answer 2

のポーリング

あなたがイメージがビューポートの内側にあるかどうかを確認したい場合はdocument.scrollTop。 イメージのドキュメントの場所を取得し、scrollTop値を減算する必要があります。

Answer 3

が期待される結果を達成するために、オプションの下に使用
1.追加位置を：idの絶対 - iPhoneを左に作ろう：200pxを表示する
2.oneの代わりに.on関数を使用すると、すべてのscrollTopでアニメーションが有効になり、一度だけ有効にならない。

HTML：

<div class="col-md-4 "> 
     <img src="http://www.w3schools.com/css/img_fjords.jpg" height="250px" width="auto" id="iphone"> 

</div> 

CSS：私はちょうど不慣れだ場合

 $(window).on("scroll", function() { 
     var currentScroll = $(window).scrollTop(); 
     if (currentScroll >= 100) { 
        $('#iphone').fadeIn(1000).animate({ 
      left: '200px' 
     }); 
     } 
     } 

); 

http://codepen.io/nagasai/pen/GqYXKJ