切换到全屏时 Javascript/jQuery 变慢

Question

我在 firefox 中遇到了一些奇怪的行为，我正在构建一个单页作品集，作为一名平面设计师，编码一直很困难。我想平滑地控制导航，然后向所有元素添加缩放(最初设计为 1920x1080 全屏)。讲师扔了一个炸弹，它也需要垂直滚动，我正在尝试让垂直导航正常工作。

问题是当我切换到全屏时，大多数导航代码在执行之前似乎需要很长时间的停顿。这仅在我切换到全屏时发生。如果我切换并刷新就可以了。我真的很想知道是什么让整个事情变慢了。

我试过没有插件的安全模式。我将 Firefox 24.0 与 Firebug 结合使用以了解细节。

我创建了一个代码 fiddle (我的第一个，它已经坏了): http://jsfiddle.net/jeffreyknipe/xfjmC/1/

滚动代码如下:

    function navTo(horizontal, vertical) {
        browserWidth = $(window).innerWidth();
        browserHeight = $(window).innerHeight();
        newRatio = browserWidth / 1920;

        $('html body div#full_site section#pages_section').animate({
            marginLeft: '-' + browserWidth * horizontal,
            marginTop: (browserWidth / 16 * 9) * vertical
        }, 1000);
        if (horizontal == 0) {
            $('#menuspace #floating_topbar #menuzone').animate({
                marginRight: 0
            });
        } else {
            $('#menuspace #floating_topbar #menuzone').animate({
                marginRight: (newRatio * (-340))
            });
        };
    };

我知道那里的编码人员会因为代码效率低下而皱眉，但我们将不胜感激任何建议。最大的问题是全屏代码变慢。

谢谢。

Answer 1

问题出现在为元素或位置的变化设置动画时进出全屏。我改用 .css 而不是 .animate 来设置新值(我确实希望它以动画形式显示到新位置)但是由于这里的动画不是交易破坏者并且它解决了这个问题我是一个快乐的露营者。

我必须假设它想要动画但是 java 脚本引擎或 Firefox 中的某些东西在更改期间变得太忙，这几乎是一个错误但我无法隔离脚本卡住时发生的事情所以我可以'不要举报。