javascript - 令人难以置信的缓慢和断断续续的 jquery 动画

Question

所以我一直在创建一个简单的动画，它复制一个 div，并将其扩展到窗口上。我正在尝试对其进行优化，以使其不那么不稳定，并且想知道是否有人可以帮助我。所以我一直在读到你不能对正在动画的元素进行任何填充或边距设置，因为这会减慢一切。这是我正在使用的动画功能:

$('.content_cell').on('click', function(event) {
        var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
        $clonedElement.css({left:$(this).position().left, 
                            top:$(this).position().top, 
                            opacity:0}) ;

        //Position caching for closing animation
        selectedPos = $(this).position();           
        var currPos= $('#invitedToChatCell').position();

        //Now animate the cloned element to the correct size
        $clonedElement.animate({
            height:640, width:700, 
            //position:'absolute', 
            left:currPos.left, 
            top:currPos.top, 
            opacity:1.0 
        }, 500, function(){ $('.cloned_object > ul').toggle(); });
        event.stopPropagation();
    });

内容单元格 CSS 和克隆对象的 CSS 看起来像这样

.content_cell {
   border-style: solid;
   cursor:pointer;
   width:300px;
   height:300px;
   overflow:auto;
}

.cloned_object{
   position:absolute;
   background-color:white;
   width:300px;
   height:300px;
}

有没有人明白为什么这个动画这么慢？或者我能做些什么来加快速度？提前致谢...

更新: 这是一个 JSFiddle link

Answer 1

不仅仅是简单的 JQuery 动画往往是“滞后的”。 我尽可能使用 css-animations/css-transforms。

您可以做的是使用 jquery 克隆 div 并将其放在带有一些新的 css 类的屏幕上。让 css 处理扩展部分。

有关 CSS 示例和好的想法，请参阅:http://daneden.me/animate

刚刚找到另一个解释 css 部分的线程:Expand div from the middle instead of just top and left using CSS