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

滚动时可以看到jQuery

1 个答案: