Jquery : animate function not supports for 2D transform

Asked Mar 31 '16 at 05:48

Active Mar 31 '16 at 07:27

Viewed 43 times

I am using below code, but not working.

<SCRIPT type="text/javascript" src="jquery-1.11.0.min.js"></SCRIPT>
<script>
    $(document).ready(function(){       
        $('#translate').mouseover(function(){           
            $(this).animate({'transform':'translate(50px,0px)'},'slow');// not working
            //$(this).css("transform","translate(50px,0px)");   //works fine        
        });
   });
</script>

My jsfiddle is : https://jsfiddle.net/jsnagaraj37/0xr3aqkm/5/

Example : http://www.w3schools.com/css/css3_2dtransforms.asp - ( 2d rotate on mouseover)

edited Mar 31 '16 at 07:27

asked Mar 31 '16 at 05:48

151291

3,308
7
48
81

2

Can you provide a JSFiddle? This should provide us with some context of the problem. – Dandy Mar 31 '16 at 05:50
`translate` is a css animation function, The jQuery animate function is used to animate properties which has a numerical value. So that is not designed to support `transform` property – Arun P Johny Mar 31 '16 at 05:56
Why do you want to do this? Why not just use `.css()` – Arun P Johny Mar 31 '16 at 05:56
@AaronLayfield - https://jsfiddle.net/jsnagaraj37/0xr3aqkm/5/ – 151291 Mar 31 '16 at 06:00
thia might be related http://stackoverflow.com/questions/5462275/animate-element-transform-rotate – Madhawa Priyashantha Mar 31 '16 at 06:07

Jquery : animate function not supports for 2D transform

0 Answers0