jquery 动画极其缓慢且断断续续

发布于 2025-01-03 06:31:18 字数 1418 浏览 0 评论 0原文

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

原文

So I have been creating a simple animation that copies a div, and expands it over the window. I am trying to optimize it so it's less choppy and was wondering if someone could help me out. So I have been reading that you cannot have any padding or margin settings on the element that is being animated, because that will slow everything down. This is the animation function I am using:

$('.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();
    });

The content cell CSS and cloned_object css look like this

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

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

does anyone see why this is such a slow animation? or anything I could do to speed it up? Thanks in advance...

UPDATE:
Here is a JSFiddle link

分享到QQ

分享到微博