0

嗨，我正在使用 jquery animate 进行放大和缩小。问题是它太慢并且需要太多时间。动画功能将缩放大约 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();

            });
                    */              
        });

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

4

3 回答 3

1

首先，你必须意识到你几乎肯定不会在数百个元素中获得良好的性能。浏览器处理的太多了。我会尝试为单个容器元素设置动画以实现您想要的任何效果。

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

如果插件没有帮助，您也可以尝试直接使用 CSS 动画。我不确定您是否真的在尝试为框的大小设置动画，或者您是否在尝试为实际缩放设置动画（框及其所有内容变大），但这里有一个为后者设置动画的示例：

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);
    }
}
于 2012-08-29T18:13:06.927 回答
0

如果您不太关心旧版浏览器，则可以为此使用 css 转换属性。它们通常工作得很快，使您可以有效地放大文档的复杂部分。这是一个人为的示例，它使用 jQuery 在单击时放大某些内容。动画会变得更复杂：我不相信 jQuery 的动画与变换一起工作，但理论上你可以使用超时在小范围内反复调整比例。

于 2012-08-29T18:16:28.080 回答
0

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

使动画不那么跳跃的唯一方法是优化您正在制作动画的内容或制作动画的方式。同时为 100 个 div 制作动画可能比任何事情都重要，但一台非常非常快的计算机可以顺利完成。

您可能需要重新考虑您正在制作动画的内容。在这种情况下，一种可能的解决方法是为大纲而不是整个内容设置动画，因为内容非常复杂，无法以良好的性能进行动画处理。

如果您需要进一步的帮助，您将不得不向我们展示更多的问题。我们需要查看您拥有的 HTML，以便我们可以看到您真正想要制作动画的内容，并且我们可能需要查看该repaintEverything()函数以了解它在做什么。

于 2012-08-29T17:57:34.197 回答