Home/ Questions/Q 7432409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:27:09+00:00

So I have been creating a simple animation that copies a div, and expands

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    More than just simple JQuery animations tend to be “laggy”.
    I use css-animations/css-transforms wherever possible.

    What you can do is clone the div with jquery and put it on the screen with some new css classes. Let the css handle the expand-part.

    For css examples and good ideas see: http://daneden.me/animate

    Just found another thread about this which explains the css part: Expand div from the middle instead of just top and left using CSS

    • 0