How To Improve Animation Performance?
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.