javascript - 慢速 Jquery 动画

Question

我有这个网页:http://miloarc.pyrogenicmedia.com/

哪个atm没什么特别的。它有一些影响，但没有一个让你倾家荡产。

如果您将鼠标悬停在图 block 上，它应该会更改其不透明度以赋予其淡入淡出效果。这是通过 Jquery 动画完成的，而不是通过 CSS(我这样做是为了它可以淡出，而不是直接更改)。页面加载时一切看起来都很好，并且淡入淡出看起来很完美。事实上，如果你将鼠标拖动到各处，就会给你一条几乎像蛇一样的“踪迹”。

无论如何，我的下一个问题是，您将看到左上角有一个框，它会告诉您有关您将鼠标悬停在其上的图 block 的信息。这似乎工作正常。当您将鼠标悬停在该信息框上时，它会切换其位置(以便您可以到达之前隐藏在其下方的图 block )。据我了解，这一切都运转良好，而且不折不扣。

但是，信息框移动一次(悬停一次)后。在 Firefox 中查看页面变得缓慢。例如，成功移动信息框后，淡入淡出效果变得非常断断续续，并且它不会快速拾取事件，这意味着您无法在屏幕上绘制“轨迹”。

Chrome 没有这个问题。无论如何，它似乎都工作得很好。 Safari 似乎也不错。虽然我确实注意到如果我移动鼠标的速度非常快，它确实会跳一点，但没有火狐跳得那么快。

Internet Explorer 根本无法运行。似乎使浏览器崩溃......并且我使用的圆 Angular 插件有错误(不知道为什么......)。

总而言之，我认为我在代码中所做的任何事情都必须非常缓慢。但我不知道它发生在哪里。

这是完整的代码，但我建议您转到链接查看所有内容。

        <script type="text/javascript">
        $(document).ready(function()
        {
            var WindowWidth = $(window).width();
            var WindowMod = WindowWidth % 20;
            var WindowWidth = WindowWidth - WindowMod;
            var BoxDimension = WindowWidth / 20;
            var BoxDimensionFixed = BoxDimension - 12;
            var dimensions = BoxDimensionFixed + 'px';


            $('.gamebutton').each(function(i)
            {
                $(this).css('width', dimensions);
                $(this).css('height', dimensions);
            });

            var OuterDivHeight = BoxDimension * 10;
            var TopMargin = ($(window).height() - OuterDivHeight) / 2;
            var OuterDivWidth = BoxDimension * 20;
            var LeftMargin = ($(window).width() - OuterDivWidth) / 2;
            $('#gamePort').css('margin-top', TopMargin).css('margin-left', LeftMargin).css('margin-right', LeftMargin);


            $('.gamebutton img').each(function(i)
            {
                $(this).hover(
                function () {
                $(this).animate({'opacity': 0.65});
                 },
                 function () {
                 $(this).animate({'opacity': 1});
                 }
                 ); 
            });

            $('.rounded').corners();

            $('.gamebutton').each(function(i)
            {
                $(this).hover(function()
                {
                    $('.gameTitlePopup').html($(this).attr('title'));
                    FadeActive();
                });
            });

            function FadeActive()
            {
                $('.activeInfo').fadeIn('slow');
            }

            $('#gameInfoLeft').hover(function()
            {
                $(this).removeClass('activeInfo');
                $(this).fadeOut('slow', function()
                {
                    $('#gameInfoRight').addClass('activeInfo');
                    FadeActive();
                });

            });

            $('#gameInfoRight').hover(function()
            {
                $(this).removeClass('activeInfo');
                $(this).fadeOut('slow', function()
                {
                    $('#gameInfoLeft').addClass('activeInfo');
                    FadeActive();
                });

            });
        });
    </script>

感谢您的帮助:)。

编辑:只是重申我的观点。我想知道为什么移动信息框后它只会变得缓慢。在此之前一切都绝对没问题。移动盒子(并将其移回)后，用户界面变得 super 慢。

Answer 1

当类选择器更具体时，jQuery 运行得更快。 $('.activeInfo') 在 DOM 中的所有内容中搜索特定类，但 $('div.activeInfo') 仅选择div(s)，然后是具有匹配类的 div 子集。

您还在所有这些相同的 div 上激活了圆 Angular 脚本，这可能会降低渲染性能。