How to optimize the jquery animate code

Question

Hi I am doing a zoom in & out using jquery animate. The problem is it is too slow and takes too much of time. The animate function is going to zoom approximately 100's of divs. Can some one please tell me what should be done to make it optimized. Here is the code below

        //Zoom In by clicking the plus button
        $("div#explanation .plus").click(function(){
        jsPlumb.repaintEverything();
/*              var strongFont = parseFloat($("div.window strong").css('font-size'));
            var newStrongFont = strongFont + 2;
            //alert("the new font is"+strongFont);
*/
            $("div#demo1").animate({'height':'+=20', 'width':'+=20'});
            $("div.window ").animate({
                    'height':'+=20px', 'width':'+=20px'
                },0,function(){
                    jsPlumb.repaintEverything();
            });

    /*              $("div.window strong").animate({
                    fontSize:newStrongFont
            },0,function(){
                jsPlumb.repaintEverything();

            });
                    */              
        });

I am having similar to zoom out. Please guide me. Thanks!

Where is the code for `repaintEverything()`? Could be needed. — sQVe, Aug 29 '12 at 17:52
100's of divs at the same time? That is going to be a redraw nightmare. — epascarello, Aug 29 '12 at 17:52
jsPlumb.repaintEverything() is an library function provided by jsPlumb. — unix_user, Aug 29 '12 at 17:53
@epascarello: i know redrawing is going to be nightmare. But when i open the firebug and did a zoom, i saw it also takes a lot of time to calculate new height and window for the div. — unix_user, Aug 29 '12 at 17:54
Add break point in firebug script tab at the jQuery animate function and go inside each step you'll able to see where it's taking more time. — Krishna Kumar, Aug 29 '12 at 17:58

josh3736 · Answer 1 · 2012-08-29T18:23:54.007

First off, you have to realize that you're almost certainly not going to get good performance aniating hundreds of elements. It's just too much for the browser to handle. I would try to animate a single container element to achieve whatever effect you're going after.

That said, you might want to take a look at the animate-enhanced plugin. In browsers that support CSS animation, the plugin automatically translates .animate(...) calls into CSS animations, which are usually hardware-accelerated. This gives much better performance than animate's usual method of changing an element's properties on a set interval.

You might also try using CSS animation directly if the plugin doesn't help. I'm not sure whether you're really trying to animate the size of the box or if you're trying to animate an actual zoom (where the box and all of its contents get bigger), but here's an example that animates the latter:

div {
    width:200px;
    height:200px;
    background:red;
    color:white;
    margin:20px 50px;
    padding:5px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

div:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-animation-name: popin;
    -moz-animation-name: popin;
    -webkit-animation-duration: 350ms;
    -moz-animation-duration: 350ms;    
}
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.4);
    }
}
@-moz-keyframes popin {
    from {
        -moz-transform: scale(1);
    }
    to {
        -moz-transform: scale(1.4);
    }
}

score 0 · Accepted Answer · answered Aug 29 '12 at 17:57

The time for the animation to complete is something you can specify as the second argument to .animate(). You have not specified it so the default is 400ms. You can set it to whatever you want. The animation will always complete in approx the time that you set, but if there is too much work for the computer to do in that time to show you a smooth animation, you will get a jumpy one.

The only way to make an animation less jumpy is to optimize what you are animating or how you are animating it. Animating 100s of divs at the same time is probably more than anything but a very, very fast computer can do smoothly.

You will probably want to rethink what you are animating. One possible work-around in cases like this to animate an outline rather than the entire contents when the contents are really complex to animate with good performance.

If you want further help, you will have to show us more of the problem. We need to see the HTML you have so we can see what you're really trying to animate and we probably need to see the repaintEverything() function to see what it's doing.

Thanks that was helpful. Can you please tell me how to animate only the outline? As well repaintEverything() method is a built-in defined function which comes with jsPlumb library. All the 100 divs are actually the rectangular windows linked one another. As well one question: Is jsPlumb.repaintEverything() method is getting called after every animate call or at the last animate call? I need to call that method at the very end when all the divs have changed their height and width. — unix_user, Aug 29 '12 at 18:14

score 0 · Answer 3 · answered Aug 29 '12 at 18:16

If you're not too concerned about older browsers, you might be able to use css transform properties for this. They usually work quite quickly, allowing you to efficiently zoom in on a complicated section of the document. Here's a contrived example, which uses jQuery to zoom in on something whenever it's clicked. Animating would get more complicated: I don't believe jQuery's animate works with transform, but in theory you could repeatedly adjust the scale on a small level using timeouts.

How to optimize the jquery animate code

3 Answers3