1

我已经努力了好几天，以完成这项工作，但我已经走到了尽头，这就是我向你寻求帮助的原因。

我有一个代码片段（如下），如果它在视口中，它能够向对象添加一个类。这非常适合触发任何 CSS3 动画。该代码在 chrome、本地和我的远程服务器上运行，但 firefox 仅在本地运行，因此该类被添加到对象中，但我的远程服务器上没有转换。所有不使用切换类的动画都可以在 firefox 上正常工作，因此 css 设置正确。

有谁知道为什么代码在我的远程服务器上的 Firefox 中不起作用？代码片段包含在正文关闭标记之前。

    $(function () { 
    // your code here
    $.expr[':'].inViewPort = function(obj){
    var scrollTop = $(window).scrollTop();
    var viewportHeight = $(window).height();
    var top = $(obj).offset().top;
    var bottom = top + $(obj).height();
    if (top <= scrollTop || bottom <= (scrollTop + viewportHeight / 0.8)) {
        return true;
    } else {
        return false;
    }
};

    });
    $(window).scroll(function (e) {
        $('.inview').each(function(){
            var self = $(this),
                inView = self.is(':inViewPort');
            self.toggleClass('animated', inView);
        });
    });

该代码的工作方式类似于，如果对象在视口中，则将类“动画”添加到具有类“inview”的所有对象。假设启动应用于对象的 css3 动画，如“fadeInLeft”。

感谢您的任何想法。如果对象在视口中，也许有人有更好的主意来触发 css3 动画。

欢呼标记

4

1 回答 1

2

我建议稍微限制一下你的滚动处理程序，看看这是否有什么不同：

(function () {
    var timeout;
    $(window).scroll(function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            $('.inview').each(function () {
                var self = $(this),
                    inView = self.is(':inViewPort');
                self.toggleClass('animated', inView);
            });
        }, 50);
    });
}());
于 2013-09-19T12:28:19.367 回答