jQuery 在滚动时可见

Question

我尝试使用jQuery visible 插件来检测元素在视口中是否可见。我使用这样的代码：

animateFrontPage: function(){
    var apps = 0;
    if($('#apps-shelf').visible(true)) {
        apps = 1;
        if(apps == 1) {
            $('#apps-shelf li').velocity("transition.bounceUpIn", { stagger: 150 });
            apps = 0
        }
    }
}

我使用滚动功能运行它：

$(window).scroll(function() {
    Functions.animateFrontPage();
});

问题是 - 每次滚动时动画都会重复。我能做些什么来预防它？

Answer 1

如果您只希望动画显示一次，您可以为元素添加一个类以标记它已完成 - 然后每次只在元素没有此类时执行动画。也许是这样的：

animateFrontPage: function(){
    var $el = $('#apps-shelf');
    if($el.visible(true) && !$el.hasClass('finished')) {
        $el.addClass('finished');
        $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 });
    }
}

更新

如果您希望其他动画在这些条件下运行，这是您需要的 else 语句：a)第一个元素 $('#apps-shelf') 的动画已经发生并且 b) 元素 $('#apps-shelf') 在屏幕上不再可见（例如，您已滚动过去）

animateFrontPage: function(){
    var $el = $('#apps-shelf');
    if($el.visible(true) && !$el.hasClass('finished')) {
        $el.addClass('finished');
        $el.find('li').velocity("transition.bounceUpIn", { stagger: 150 });
    } else if (!$el.visible(true) && $el.hasClass('finished')){
        //other animation here
    }
}