我无法在 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 中运行这么慢?
最佳答案
从没有 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()
动画就会排队并一个接一个地触发。这使得它看起来比实际慢得多。
进一步的优化可能只涉及实际在屏幕上的处理元素,但考虑到现在的表观速度,这是毫无意义的。
关于javascript - 为什么我的动画在 Firefox 中延迟?我该如何改进这个滚动脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24248023/