0

我尝试使用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();
});

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

4

1 回答 1

0

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

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
    }
}
于 2014-07-08T15:04:50.850 回答