如何使这个 jQuery 效果响应？

Question

更新：我将此添加到我的卸载功能中：

$(window).resize(function(){
        var pageheight = $(window).height();
        $('section').css('height', pageheight)
    });

它可以工作，但在调整窗口大小时性能是 AWFUL。有什么建议吗？

我有一个页面。有两个区域，标题和部分。两者都是页面高度的 100%（在页面加载时，这很重要）。当您单击“开始”按钮时，它们都向上移动。标题被隐藏，部分进入视图。

这一切都是通过 jQuery 在页面加载时获取页面高度来完成的。所以它工作得很好，直到你调整浏览器窗口的大小，然后一切都关闭了，因为变量“页面高度”已经改变了。如何保持页面高度变量不断更新，以便在调整浏览器窗口大小时保持响应？

这里是网站：http://hashtraffic.com/

点击“开始”查看滚动效果。

这是 jQuery：

jQuery.fn.center = function (absolute) {
    return this.each(function () {
        var t = jQuery(this);

        t.css({
            position:   absolute ? 'absolute' : 'absolute', 
            left:       '50%', 
            top:        '50%', 
            zIndex:     '99'
        }).css({
            marginLeft: '-' + (t.outerWidth() / 2) + 'px', 
            marginTop:  '-' + (t.outerHeight() / 2) + 'px'
        });

        if (absolute) {
            t.css({
                marginTop:  parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(), 
                marginLeft: parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
            });
        }
    });
};

$(function(){
    var pageheight = $(window).height();
    $('section, header').css('height', pageheight)
    $('h1').delay(500).fadeTo(1000, 1);
    $('h2').delay(1000).fadeTo(1000, 1);
    $('h3').delay(1500).fadeTo(1000, 1);
    $('section').delay(500).fadeTo(1000, 1)
    $('hgroup').center();
    $('p').center()
    $('h3').click(function(){
        $('hgroup').animate({marginTop: -2*pageheight}, 300);
        $('section').animate({marginTop: -pageheight}, 300);
        $('p').delay(4000).fadeOut(function() {
            $(this).text("The internet is both the most powerful #interconnectivity mechanism we have, and is the crux of our #collectiveintelligence.").fadeIn()
            $(this).delay(4000).fadeOut(function(){
                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                $(this).delay(4000).fadeOut(function(){
                    $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                    $(this).delay(4000).fadeOut(function(){
                        $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                        $(this).delay(4000).fadeOut(function(){
                            $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            $(this).delay(4000).fadeOut(function(){
                                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            });
                        });
                    });
                });
            });
        });
    });
});

还有 CSS：

* {
    margin: 0;
    padding: 0;
}
body {
    background: #FFF;
    overflow: hidden;
}
header {
    text-align: center;
    top: 50%;
    height: 100%;
    width: 100%;
}
h1 {
    font: 300 10em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    position: relative;
    opacity: 0;
}
h2 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
}
h3 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
    cursor: pointer;margin-top: 75px;
    position: relative;
    left: 50%;
    margin-left: -75px;
    font: 100 3em Anivers;
    width: 150px;
    border: 4px solid #000;
    -webkit-border-radius: 30px;
}
p {
    font: 300 1.5em Anivers;
    text-align: center;
    position: relative !important;
    width: 800px;

}
section {
    height: 100%;
    width: 100%;
    opacity: 0;
}

我猜 Pageheight 需要是一个百分比值，但你不能用 jQuery 为百分比值设置动画，所以我有点烂。

谢谢！

Answer 1

如果您真的关心性能，我强烈推荐 Ben Almans Throttle / Debounce 插件。它们正是为此目的而设计的。

插件可以在http://benalman.com/projects/jquery-throttle-debounce-plugin/找到

Ben 继续解释 resize 事件如何在某些浏览器中持续触发，这会极大地影响性能。

在示例页面：http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/，您可以看到“限制”调整大小事件的结果

Answer 2

$(window).resize(function(){
    var pageheight = $(window).height();
    $('section').css('height', pageheight)
});

这样就解决了！它只是在调整窗口大小时重新更新页面高度。性能问题是由 Safari 中的错误引起的。清除缓存，重启浏览器，运行流畅！

感谢@nnnnnn 和@SagarPatil