Geek asks and answers

JQuery animated zoom on Firefox

I have a great effect when you hover over a specific item and it scales more. I made it simple:

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

The problem is that this does not work on firefox :( Now I read that firefox is the only browser that does not support css scaling? It seems very strange ... so what's the best approach to animating the scaling mechanism using jQuery above?

+3
source share
2 answers

You can convert css using scale, everything in your css.

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

You can use CSS3 transforms like

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

but currently you cannot animate them using basic jQuery.

jQuery, jquery.transform.js.

, IE9 transform, SO.

+2

More articles:


All Articles