Question

嗨，我正在进行放大＆amp;使用jquery动画。问题是它太慢而且需要太多时间。动画功能将缩放大约100个div。有人可以告诉我应该做些什么来使其优化。这是下面的代码

        //Zoom In by clicking the plus button
        $("div#explanation .plus").click(function(){
        jsPlumb.repaintEverything();
/*              var strongFont = parseFloat($("div.window strong").css('font-size'));
            var newStrongFont = strongFont + 2;
            //alert("the new font is"+strongFont);
*/
            $("div#demo1").animate({'height':'+=20', 'width':'+=20'});
            $("div.window ").animate({
                    'height':'+=20px', 'width':'+=20px'
                },0,function(){
                    jsPlumb.repaintEverything();
            });

    /*              $("div.window strong").animate({
                    fontSize:newStrongFont
            },0,function(){
                jsPlumb.repaintEverything();

            });
                    */              
        });

我有类似的缩小。请指导我。谢谢！

Answer 1

首先，你必须意识到你几乎肯定不会获得数百个元素的良好表现。这对浏览器来说太过分了。我会尝试动画一个容器元素来实现你想要的任何效果。

那就是说，你可能想看看animate-enhanced plugin。在支持CSS动画的浏览器中，插件会自动将.animate(...)调用转换为CSS动画，这些动画通常是硬件加速的。这比animate在设定间隔内更改元素属性的常用方法提供了更好的性能。

如果插件无效，您也可以尝试使用CSS animation directly。我不确定你是否真的试图为盒子的大小设置动画，或者你是否试图为实际缩放设置动画（盒子及其所有内容变大），但是here's an example that animates the latter：< / p>

div {
    width:200px;
    height:200px;
    background:red;
    color:white;
    margin:20px 50px;
    padding:5px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

div:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-animation-name: popin;
    -moz-animation-name: popin;
    -webkit-animation-duration: 350ms;
    -moz-animation-duration: 350ms;    
}
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.4);
    }
}
@-moz-keyframes popin {
    from {
        -moz-transform: scale(1);
    }
    to {
        -moz-transform: scale(1.4);
    }
}

Answer 2

动画完成的时间是您可以指定为.animate()的第二个参数。您尚未指定它，因此默认值为400毫秒。您可以将其设置为您想要的任何内容。动画将始终在您设置的大约时间内完成，但如果计算机在此时间做太多工作以向您显示流畅的动画，您将获得一个跳跃的动画。

使动画不那么跳跃的唯一方法是优化动画制作或动画制作方式。同时动画100个div可能比任何东西都要多，但非常非常快的计算机可以顺利完成。

您可能想重新考虑一下您的动画效果。在内容非常复杂且具有良好性能的动画时，在这样的情况下可以解决一下轮廓而不是整个内容的一种可能的解决方法。

如果您需要进一步的帮助，则必须向我们展示更多问题。我们需要查看您拥有的HTML，以便我们可以看到您真正尝试制作动画的内容，我们可能需要查看repaintEverything()函数才能看到它正在做什么。

Answer 3

如果您不太关心旧浏览器，则可以使用css转换属性。它们通常可以很快地工作，允许您有效地放大文档的复杂部分。这是a contrived example，它使用jQuery在点击时放大某些东西。动画会变得更复杂：我不相信jQuery的动画与变换一起工作，但理论上你可以使用超时重复调整比例。

如何优化jquery动画代码

3 个答案: