Is it possible to animate the zoom css property

Question

Is it possible to animate the zoom animation

I've tried this but it is just the same as using the css property to set it.

$(this).animate({
    zoom: 0.5
}, 500);

Height animations work etc

Im sure its do-able via creating your own animate function. But doesn't this property only work in IE? Just wanted to check you are aware of this. — Blowsie, Nov 07 '11 at 10:21
just found this answer on zooming in other browsers, may come in use for your solution http://stackoverflow.com/questions/2026294/zoom-css-javascript — Blowsie, Nov 07 '11 at 10:23

score 9 · Accepted Answer · edited May 23 '17 at 12:21

9

Try this :

-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:21

Community

1
1

answered Nov 07 '11 at 10:19

Tushar Ahirrao

12,669
17
64
96

score -4 · Answer 2 · answered Nov 08 '11 at 11:27

You can even do in this way with jQuery :

jQuery(this).hover(function() {
        jQuery(this).animate({
                marginTop: '-10px', //Bring image to top a little bit
                marginLeft: '-10px',
                width: '30px', //Zoom by 30 px
                height: '30px' 
            }, 500); /* 500 is the speed of how fast/slow image animates */

        } , function() {
        jQuery(this).animate({
                width: '15px', //Bring image back to original size
                height: '15px'
            }, 500);
    });

zoom actually scales text images backgrounds etc – bentech Nov 08 '11 at 11:29 — bentech, Nov 08 '11 at 11:29

Is it possible to animate the zoom css property

2 Answers2