Menu
I can rotate a div with css, and jquery .rotate, but i don't know how to animate it.
601
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE, but Matt's zachstronaut solution doesn't work in IE either.
If you want to support IE too, you'll have to look into using a canvas like I believe Raphael does.
Here is a simple jQuery snippet that rotates the elements in a jQuery object. Rotation can be started and stopped:
$(function() { var $elie = $("img"), degree = 0, timer; rotate(); function rotate() { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { ++degree; rotate(); },5); } $("input").toggle(function() { clearTimeout(timer); }, function() { rotate(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <input type="button" value=" Toggle Spin " /> <br/><br/><br/><br/> <img src="http://i.imgur.com/ABktns.jpg" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
