jQuery animated zoom on firefox

Question

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 doesn't support css zoom? Seems very strange... so what's the best approach to animating a zooming mechanism with jQuery above?

@bazmegakapa, can I easily animate css3 transforms with jQuery? — at., Mar 17 '11 at 12:02
AFAIK not, but there is a lightweight plugin for that: https://github.com/lrbabe/jquery.transform.js — kapa, Mar 17 '11 at 12:11

score 5 · Accepted Answer · edited Mar 17 '11 at 11:51

5

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);
}

edited Mar 17 '11 at 11:51

Kyle

65,599
28
144
152

answered Mar 17 '11 at 11:49

GMO

669
1
6
11

Well this definitely works, but not animated. It just pops up immediately. I guess I have to implement my own animation mechanism with setInterval? – at. Mar 17 '11 at 12:02
just reading some firefox documentation, looks like the transform 0.5s should animate this, but only works on firefox 4.0 while I have 3.6. – at. Mar 17 '11 at 12:05
1

FF4 will be released next week ;). I think you should detect the "transform" and "transition" rules support with something like Modernizr and use jQuery when not fully supported. – GMO Mar 17 '11 at 13:28
Is zoom part of the css standard? Does ff4 now support zoom? If not, what's the standard way I should handling zooming across browsers? – at. Mar 17 '11 at 18:04
This is not al ALL even close to what the OP asks for. It's not even cross-browser compatible. – halfpastfour.am Aug 17 '11 at 15:16

score 2 · Answer 2 · edited May 23 '17 at 12:04

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.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 17 '11 at 12:23

kapa

77,694
21
158
175

jQuery animated zoom on firefox

2 Answers2