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

所以我一直在创建一个简单的动画，复制一个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;
}

有人知道为什么这是一个如此缓慢的动画吗？或者我能做些什么来加速它？先谢谢你

更新：

---

这里有一个JSFIDLE，它不仅仅是简单的JQuery动画，而且往往是“laggy”。 我尽可能使用css动画/css转换

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

有关css示例和好主意，请参见：

---

刚刚找到了另一个关于css部分的帖子：

如果你能养成习惯，从中链接一个工作示例会有很大帮助=）哦，好主意。。。看起来网站现在已经关闭了？还是只有我？JSFIDLE有时有点过载。继续努力。NVM，上车。只是花了比平时更长的时间。不幸的是，这在IE8中不起作用，因为很多css3都是真的。IE-8无论如何都应该被禁止：哈哈，我知道。实际上，我已经用CSS3制作了一个动画来做我需要的事情，然后编写了一个fork:X来处理旧的IE。不幸的是，相同的代码在chrome和FF中的行为完全不同。这真让我受不了。现在我知道了早期网络中的情况！>：(