How to animate CSS Translate

jquery css jquery-animate jquery-transit
Ignacio Correia picture Ignacio Correia · Dec 23, 2012 · Viewed 154k times · Source

Is it possible to animate the CSS property translate via jquery?

$('.myButtons').animate({"transform":"translate(50px,100px)"})

and does it work in many browsers?

Demo not working: http://jsfiddle.net/ignaciocorreia/xWCVf/

UPDATE:

My solutions:

  1. Simple implementations - http://jsfiddle.net/ignaciocorreia/R3EaJ/
  2. Complex implementation and multi-browser - http://ricostacruz.com/jquery.transit/

Answer

flec picture flec · Dec 23, 2012

There are jQuery-plugins that help you achieve this like: http://ricostacruz.com/jquery.transit/

Related questions

animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More