[jQuery] Zoom animation jerky not smooth
Hi all,
I've got boxes with images in that I need to zoom in (i.e. expand) on
mouse over. I achieve this by animating some css properties of said
box, it looks a little something like this;
// Magnify on mouse over.
$(".thumbBox").hover(function () {
var box = parseInt($(this).attr("id").substring(5, 6)) - 1;
$(this).queue("fx", []);
$(this).animate({
"left": x[box] - 15,
"top": y[box] - 15,
"width": 120,
"height": 120
}, {duration: 100, easing: "easeOutCirc"});
$(this).fadeTo("fast", 1);
}, function() {
var box = parseInt($(this).attr("id").substring(5, 6)) - 1;
$(this).animate({
"left": x[box],
"top": y[box],
"width": 90,
"height": 90
}, {duration: 100, easing: "easeOutCirc"});
$(this).fadeTo("fast", 0.75);
});
So what happens here is we hover over a div, animations in the queue
are cleared. We figure out the box we're hovering over, then we
animate the left and top css properties to 15 pixels less than their
present values, this causes expansion to occur in the left and the top
axes. At the same time the width and the height are expanded. This
creates the effect of expanding the box in (keeping its centre in
place) and it works just fine.
The problem is this, the enlargement of the box animation is somewhat
jerky, it seems to be that the following happens asynchronously;
1. left = left -1
2. top = top -1
3. width = width + 1
4. height = height + 1
5. goto 1 until complete
Can anyone find a way to make this happen smoothly? As you can see
I've played with easing to see if that helps, it doesn't. I think I
need to understand better how the jquery animate function works, but I
don't, I'd really appreciate help from someone.
Ryan.