jQuery .animate() is choppy in Chrome and stutters in Firefox
Consider following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$('.item a').mouseover(function(){ // var this_img = $(this).find('.img_grayscale'); var css_w = parseInt(this_img.attr("width"), 10); var css_h = parseInt(this_img.attr("height"), 10); // 10% of height and width calc here var css_p_w = css_w * 10 / 100; var css_p_h = css_h * 10 / 100; // var css_top = -(css_p_h / 2); var css_left = -(css_p_w / 2); // this_img.stop().animate({ opacity:1 }, 100, function(){ this_img.animate({width:css_w + css_p_w, height:css_h + css_p_h, top:css_top, left:css_left}, 1200); }); // }).mouseout(function(){ // var this_img = $(this).find('.img_grayscale'); var css_w = parseInt(this_img.attr("width"), 10); var css_h = parseInt(this_img.attr("height"), 10); // this_img.stop().animate({ width:css_w, height:css_h, top:"0", left:"0" }, 1200, function(){ this_img.animate({ opacity:0 }, 100); }); // }); |
What I do here is pretty basic:
#1. Put width and height of the hovered image in the variable.
#2. Calculate 10% increase of each parameter.
#3. Calculate amount of pixels image should be moved left and top to keep it centered.
#4. Plug this variables in animate().
As far as css goes, nothing fancy here either. I use position absolute on image to completely remove it from the document flow. Thus freeing browser from the burden of recalculating position of all elements.
|
1 |
.item img {position: absolute;} |
..and it should be a smooth sailing…
But no, result is absolutely hideous. I would never use animation like this in any of my projects, especially when I spend so much time on getting the design perfect. Please check this demonstration I prepared for you, and don’t forget to see it in firefox, it is especially jittery there.
Leave a Reply