jQuery animated zoom on firefox

I've got a great effect where you hover your mouse over a particular element and it scales bigger. I did this simply with:

$('#element_to_scale').live('mouseenter', function() {
    $(this).stop().animate({zoom: 2});
}).live('mouseleave', function() {
    $(this).stop().animate({zoom: 1});
});

Problem is this doesn't work on firefox :(. I read now that firefox is the only browser which 开发者_Go百科doesn't support css zoom? Seems very strange... so what's the best approach to animating a zooming mechanism with jQuery above?

You can user css transform with scale, all in your css.

#element_to_scale {
    -moz-transition: transform 0.5s linear 0s;
}
#element_to_scale:hover {
    -moz-transform: scale(2);
}

You can use CSS3 transforms, like

-moz-transform: scale(2); 
-webkit-transform: scale(2);
-o-transform: scale(2);

, but currently you cannot animate them with basic jQuery.

However, you can use a jQuery plugin for that, like jquery.transform.js.

Please note the IE9 also supports the transform property, I found some info about it in this SO question.