切换到全屏时Javascript / jQuery减速

时间:2013-11-01 08:50:02

标签: javascript jquery css animation fullscreen

我有一些来自firefox的奇怪行为,我正在构建一个单页组合,而作为一个图形设计师,编码很难。我想平滑地控制导航,然后为所有元素添加缩放(最初设计为1920x1080全屏)。讲师放下了一个需要垂直滚动的炸弹,我正在尝试让垂直导航工作。

问题是当我切换到全屏时,大多数导航代码在执行之前似乎需要很长时间的停顿。这只有在我切换到全屏时才会发生。如果我切换并刷新,那就没关系。我真的想知道什么会减慢整个事情。

我尝试过没有插件的安全模式。我正在使用带有Firebug的Firefox 24.0来获取碎片。

我创建了一个代码小提琴(我的第一个,它已经坏了): 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))
            });
        };
    };

我知道那里的编码人员会对代码效率低下感到不满,但任何建议都会受到赞赏。最重要的是全屏代码变慢。

感谢。

1 个答案:

答案 0 :(得分:0)

当进出全屏时动画物品或位置的变化时出现问题。我切换到使用.css而不是.animate设置新值(我确实希望它动画到新位置),但由于这里的动画不是交易破坏者而且它解决了问题我是一个快乐的露营者。

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