jQuery Forum

Hello, I just started messing around with JQuery today, and I'm wondering how to get the best performance.

I am trying to animate 3 different objects when an event happens. I've got it to work, but the animation is a little "choppy" sometimes. Here's an example of what I'm doing:

        $("#frontNav a").click(function(event) {
            var img1Pos = $("#logo1").position();
            var img2Pos = $("#logo2").position();
            var frNavPos = $("#frontNav").position();
            var animationDur = 1000;
            $("#frontNav").css({left: frNavPos.left, top: frNavPos.top, position: "absolute"});
            $("#logo2").css({right: img2Pos.left, top: img2Pos.top, position: "absolute"});
            $("#logo1").css({left: img2Pos.left, top: img2Pos.top, position: "absolute"});
            $("#frontNav").animate({top:"170px"}, animationDur);
            $("#logo2").animate({top:"100px", right:"2.5%"}, animationDur);
            $("#logo1").animate({top:"100px", left:"2.5%"}, animationDur);
            event.preventDefault();
        });


I'm not famalier with the JQuery internals, but it looks like the way my code is set up, Jquery is running 3 separate timers (one for each animation). Anybody know of any way to improve my animation's performance? Is there a way to just run 1 timer for all the animations?

Oh, and what is "queue:false" for? I'm not using it, and my animations aren't queuing up.