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

令人难以置信的缓慢和不稳定的jquery动画

1 个答案: