当你滚动到一个特定的div时，jQuery delay（）开始

Question

我的div gray内有延迟。我不希望这些延迟或动画开始，直到用户滚动到该特定div。我试过做的不行。延迟和动画仍然有效，但一旦页面加载就会开始。

有人看到我做错了吗？

＆＃13;

＆＃13;

$(function() {
	var oTop = $('.gray').offset().top - window.innerHeight;
    $(window).scroll(function(){
    
 		var pTop = $('body').scrollTop();
    	console.log( pTop + ' - ' + oTop );
 		if( pTop > oTop ){
     		textdelays();
 		}
	});
});

$(function textdelays(){
  $('#text').delay(1000).fadeIn(2200);
  $('#text-button').delay(1000).fadeIn(2200);
  $('#text-button').animate({'top': '60%'}, 1000);
});

＆＃13;

.green {
  background-color: green;
  width: 100%;
  height: 500px;
 }
 .yellow {
  background-color: yellow;
  width: 100%;
  height: 500px;
 }
.gray {
  background-color: #CCC;
  width: 100%;
  height: 300px;
 }
#text {
  color: blue;
  display: none;
  text-align: center;
  position: relative;
  margin: 0 25%;
  top: 35%;
  font-size: 1.3em;
 }
 #text-button {
   position: relative;
   wdith: 100%;
   text-align: center;
   top: 70%;
   display: none;
   cursor: pointer;
 }
 .border-span {
   border: 2px solid #FFF;
   padding: 15px 10px;
   color: #FFF;
   font-weight: bold;
 }
 .border-span:hover {
    background-color: #FFF;
    color: #000;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
  <div id="text">text.</div>
  <div id="text-button"><span class="border-span">text animation</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;