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!

Answer 1

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.