Question

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

我有一个代码片段（如下所示），它可以在对象中添加一个类（如果它在视口中）。这对任何CSS3动画来说都是完美的。代码在chrome，local和我的远程服务器上工作，但firefox仅在本地工作，因此该类被添加到对象，但我的远程服务器上没有转换。所有不使用toggle类的动画都可以正常使用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动画。

欢呼声标记

Answer 1

我建议你稍微调整一下你的滚动手柄，看看是否有任何区别：

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

toggleClass当视口中的对象触发CSS3动画时

1 个答案: