令人难以置信的缓慢和波涛汹涌的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 和 cloned_object 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