非常に遅くて不安定なjqueryアニメーション

Question

私はdivをコピーしてウィンドウ上に展開する簡単なアニメーションを作成しています。私はそれを最適化しようとしているので、不安定ではなく、誰かが私を助けてくれるのだろうかと思っていました。だから、アニメーション化されている要素にパディングやマージンの設定をすることはできないということを読んでいます。そのため、すべてが遅くなるからです。これは、このような遅いアニメーションがある理由誰が見るんこの

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

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

よう

$('.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の外観：これは私が使用していたアニメーション機能ですか？それをスピードアップするためにできることは何ですか？事前のおかげで...

UPDATE：ここ は単純なjQueryのアニメーションよりもJSFiddle link

Answer 1

詳細は、 "ラグ" になりがちです。 可能な限り、私はcss-animations/css-transformsを使用します。

あなたができることは、jqueryでdivを複製し、いくつかの新しいCSSクラスを使って画面に表示することです。 CSSが拡張部分を処理させます。 CSSの例と優れたアイデアについては

は、以下を参照してください。あなたはそれのhttpから作業例をリンクすることを習慣にしていることができればExpand div from the middle instead of just top and left using CSS