0

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

哪个atm没什么特别的。它有一些影响，但没有一个会破坏银行。

如果您将鼠标悬停在瓷砖上，它应该更改其不透明度以使其具有淡化效果。这是通过 Jquery Animation 完成的，而不是通过 CSS（我这样做是为了让它可以褪色，而不是直接改变）。页面加载时一切看起来都很好，并且淡入淡出看起来很完美。事实上，如果你在整个地方拖动鼠标，它会给你一条几乎像蛇一样的“踪迹”。

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

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

Chrome 没有这个问题。无论如何，它似乎都可以正常工作。Safari似乎也不错。虽然我确实注意到如果我移动鼠标真的很快，它确实会跳跃一点，但不如 firefox。

互联网浏览器根本不工作。似乎使浏览器崩溃......并且我使用的圆角插件出现错误（不知道为什么......）。

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

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

        <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>

谢谢你的帮助 ：）。

编辑：只是为了重申我的观点。我想知道为什么它只会在移动信息框后变得迟缓。在此之前，一切都很好。移动框（并将其移回）后，用户界面变得超级慢。

4

3 回答 3

3

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

您还有一个圆角脚本在所有这些相同的 div 上处于活动状态，这可能会降低渲染性能。

于 2010-06-08T02:33:45.453 回答
2

正如预期的那样，您的性能结果似乎是正确的。Chrome 是最快的，然后是 Safari、Firefox、IE。（虽然今天发布的 Safari 5 据说可以和 Chrome 媲美。）

也许其他人会有其他想法，但我唯一能想到的就是缩短动画的持续时间，让每个动画结束得更快，重叠更少。

$(this).hover(
    function () {
         $(this).animate({'opacity': 0.65}, 300); // Try a quicker animation
    },
    function () {...

不确定它会有多大帮助，但它可能值得一试。

仅供参考 - 在代表一组元素的 jQuery 对象上设置事件处理程序时，您不需要使用each(). 您可以将一次绑定到整个集合。所以代替这个：

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

做这个：

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

它不会帮助您解决性能问题，但它是影响元素集的正确方法。

于 2010-06-08T02:34:04.450 回答
0

Javascript 可能无法处理您正在做的事情。但是在尝试一些事情之前不要放弃：

  • 尝试让hover()函数立即更改不透明度，然后仅在“unhover()”过渡上使用淡入淡出。这会让人感觉活泼但也很流畅。我会尝试这样做，因为这会将您的处理减少近一半，并且可能就足够了。

  • 看animate()方法。您可以告诉它在开始下一个动画之前完成所有正在运行的动画。所以在悬停时，让它在开始下一个动画之前完成所有其他动画。这并不理想，但它会减少你的“尾巴”拖拽。这与第一个建议有点不相容，所以请使用您的判断。

  • IE 上的不透明度功能使用“过滤器”。我不知道细节，但它似乎比原始 Javascript 更重。如果您尝试在框中包含文本，则会非常有问题。无论如何，您可能需要尝试其他方法。您可能只需要在不同的浏览器上采取不同的方法，在无法处理的浏览器上丢失一些动画。

  • 可能有一些方法可以创建一个具有褪色效果的“动画 gif”。不确定这种方法——只是一个想法。

话虽如此，我已经建立了一个非常相似的页面，一次有 17 张图像，交叉淡入淡出到其他 17 张图像。它在所有浏览器上都表现良好。不过，我们的设计更加宽容——边缘没有那么硬。

祝你好运。如果我有任何其他想法，我会回来查看。

于 2010-06-08T04:52:59.737 回答