javascript - 为什么我的动画在 Firefox 中延迟？我该如何改进这个滚动脚本？

Question

我无法在 Firefox 中及时执行此代码。它似乎在 Chrome 中运行良好。

JSFiddle 在这里:http://jsfiddle.net/EXDhb/

我在这里使用的真实示例页面:http://mindevo.com/tests/tacos.html

我不确定我是否遗漏了什么。我有点通过阅读其他人放在一起的一堆页面滚动脚本来破解这个。不确定这是否是我完成我想要完成的事情的最佳方式(即使下一个区域变暗，直到它稍微显露出来。(我为此使用了一半)。

这是我的javascript:

$(document).ready(function(){
 $(window).scroll(function(){
  $('.dark').each(function(i){

   var half_object = $(this).position().top + ($(this).outerHeight()/2);
   var bottom_window = $(window).scrollTop() + $(window).height();
   var bottom_object = $(this).position().top + $(this).outerHeight();

   if(bottom_window > half_object){
    $(this).animate({'opacity':'1'},200);
   }
   else if(bottom_object > $(window).scrollTop()) {
    $(this).animate({'opacity':'.5'},200);
   }
  });
 });
});

有更好的方法吗？我尝试添加/删除 css 类，但它引发了一些我不满意的疯狂 Chrome 错误。

为什么它在 Firefox 中运行这么慢？

Answer 1

从没有 6 个单独的 jQuery $(this) 操作和多个 $(window) 开始!尽可能使用临时变量以避免重新查询。

JSFIddle:http://jsfiddle.net/TrueBlueAussie/EXDhb/9/

$(document).ready(function () {
    // window never changes
    var $window = $(window);
    $window.scroll(function () {
        // Window height may have changed between scrolls
        var windowHeight = $window.height();
        var scrollTop = $window.scrollTop();
        $('.dark').each(function (i) {
            var $this = $(this);
            var top = $this.position().top;
            var outerH = $this.outerHeight();
            var half_object = top + (outerH / 2);
            var bottom_window = scrollTop + windowHeight;
            var bottom_object = top + outerH;

            console.log(half_object);

            if (bottom_window > half_object) {
                $this.stop().animate({
                    'opacity': '1'
                }, 200);
            } else if (bottom_object > scrollTop) {
                $this.stop().animate({
                    'opacity': '.5'
                }, 200);
            }
        });
    });
});

依此类推，直到您不执行任何两次有您不需要的开销的事情。

更新:停止以前的动画

暂停不是因为上面代码的速度，而是因为没有停止多个动画。问题是 scroll 会频繁触发，所以如果没有 .stop() 动画就会排队并一个接一个地触发。这使得它看起来比实际慢得多。

进一步的优化可能只涉及实际在屏幕上的处理元素，但考虑到现在的表观速度，这是毫无意义的。