向下滾動時運行動畫一次

Question

我正在處理一個項目，並且我很難解決此問題。這是問題： - 當用戶向下滾動和石灰色div可見動畫將開始。當用戶向上滾動動畫將停止。但真正的問題是當lime color div可見時多次運行的動畫。我想只在lime color div可見時才運行一次動畫。請參閱jsfiddle演示。 這裏是JavaScript代碼片段。

function scollPosition(){ 
var sotpScroll = 0; 
    $(window).scroll(function(){ 
     if(sotpScroll == 0){ 
      sotpScroll = 1; 
      var cPosition = $('.c').offset(); 
      var animationStartPoint = cPosition.top - 100; 
      console.log(animationStartPoint); 
      // console.log('c class position' + cPosition.top); 
      var dPosition = $('.d').offset(); 
      // console.log('d class position' + dPosition.top); 
      var windowPosition = window.pageYOffset; 
      console.log('window position:- ' + windowPosition + ' dPosition.top:- ' + dPosition.top); 
      if (windowPosition > animationStartPoint && windowPosition < dPosition.top){ 
       animation(); 
      } 
     } 
     setTimeout(function(){sotpScroll=0},10); 
    }); 
} 

Thankx提前並道歉爲我的英語。請幫我解決這個bug

Answer 1

添加一個全球性的標誌，表示如果該區域是可見或不可見：

var areaVisible 

[...] 

if (windowPosition > animationStartPoint && windowPosition < dPosition.top) { 
// Area is visible 
    if (!areaVisible) { // If just became visible 
     animation(); 
    } 
    areaVisible = true; // Prevent more animations 
} else { 
    areaVisible = false; 
} 

小提琴：http://jsfiddle.net/bortao/BB2k5/