向下和向上滚动时运行一次动画答案

【问题标题】：run animation once while scroll down and up向下和向上滚动时运行一次动画
【发布时间】：2014-02-07 04:25:03
【问题描述】：

我正在做一个项目，但我很难解决这个问题。这是问题：- 当用户向下滚动并且石灰色 div 可见动画将开始。当用户向上滚动动画将停止。但真正的问题是动画在石灰色 div 可见时多次运行。我只想在石灰色 div 可见时运行一次动画。请参阅jsfiddle 演示。这是javascript代码sn-p。

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);
    });
}

提前感谢并为我的英语道歉。请帮我解决这个错误

【问题讨论】：

标签： javascript jquery html animation scroll

【解决方案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/

【讨论】：