Javascript 慢Jquery动画

我有这个网页：

哪台自动取款机没什么特别的。它有一些影响，但没有一个会使银行破产

如果您将鼠标移到瓷砖上，它应该更改其不透明度以提供淡入淡出效果。这是通过Jquery动画完成的，而不是通过CSS（我这样做是为了让它褪色，而不是直接改变）。当页面加载时，一切看起来都很好，淡出看起来很完美。事实上，如果你把鼠标拖得到处都是，if会给你一条几乎像蛇一样的“轨迹”

无论如何，我的下一个问题是，您将看到左上角有一个框，它将告诉您有关您正在悬停的磁贴的信息。这似乎很有效。当您将鼠标悬停在该信息框上时，它会切换其位置（以便您可以接触到先前隐藏在其下方的瓷砖）。据我了解，这一切都很好，不折不扣

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

Chrome没有这个问题。不管怎样，它似乎都很好用。Safari看起来也不错。虽然我确实注意到如果我移动我的鼠标真的很快，它确实会跳一点，但没有firefox跳得那么快

Internet explorer根本不工作。似乎会使浏览器崩溃。。。我使用的圆角插件有一个错误（不知道为什么…）

总而言之，我认为无论我在代码中做什么，都必须非常缓慢。但我不知道发生在哪里

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

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

$（文档）.ready（函数（）
{
var WindowWidth=$（window.width（）；
var WindowMod=窗宽%20；
var WindowWidth=WindowWidth-WindowMod；
var BoxDimension=窗宽/20；
var BoxDimension Fixed=BoxDimension-12；
变量维度=固定的BoxDimensions+‘px’；
$（'.gamebutton'）。每个（函数（i）
{
$（this.css（'width'，dimensions）；
$（this）.css（'height'，dimensions）；
});
var OuterDivHeight=箱体尺寸*10；
var TopMargin=（$（窗口）.height（）-OuterDivHeight）/2；
var OuterDivWidth=BoxDimension*20；
var LeftMargin=（$（窗口）.width（）-OuterDivWidth）/2；
$（“#游戏端口”）.css（'margin-top'，TopMargin）.css（'margin-left'，LeftMargin）.css（'margin-right'，LeftMargin）；
$（'.gamebutton img'）。每个（函数（i）
{
$（此）。悬停(
函数（）{
$（this.animate（{'opacity'：0.65}）；
},
函数（）{
$（this.animate（{'opacity'：1}）；
}
); 
});
$（'.rounded'）.corners（）；
$（'.gamebutton'）。每个（函数（i）
{
$（this）.hover（函数（）
{
$（'.gameTitlePopup'）.html（$（this.attr（'title'））；
FadeActive（）；
});
});
函数FadeActive（）
{
$（'.activeInfo'）.fadeIn（'slow'）；
}
$（'#gameInfoLeft'）。悬停（函数（）
{
$（this.removeClass（'activeInfo'）；
$（this.fadeOut（'slow'，function（））
{
$（'gameInfoRight'）.addClass（'activeInfo'）；
FadeActive（）；
});
});
$（'#gameInfoRight'）。悬停（函数（）
{
$（this.removeClass（'activeInfo'）；
$（this.fadeOut（'slow'，function（））
{
$（'#gameInfoLeft'）.addClass（'activeInfo'）；
FadeActive（）；
});
});
});

谢谢你的帮助：）

---

编辑：只是重复我的观点。我想知道为什么它只在移动信息框后才会变慢。在这之前，一切都很好。移动框（并将其向后移动）后，UI会变得非常慢

jQuery在类选择器更具体时运行得更快

$（'.activeInfo'）

在DOM中搜索所有特定类，但

$（'div.activeInfo'）

仅选择div，然后选择具有匹配类的div子集

---

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

jQuery在类选择器更具体时运行得更快

$（'.activeInfo'）

在DOM中搜索所有特定类，但

$（'div.activeInfo'）

仅选择div，然后选择具有匹配类的div子集

---

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

正如预期的那样，您的性能结果似乎完全正确。Chrome的速度最快，其次是Safari、Firefox和IE（尽管今天发布的Safari5据说与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});
     }); 

---

这无助于解决您的性能问题，但它是影响元素集的正确方式。

您的性能结果似乎与预期的一样。铬是不褪色的