css - JQuery- Rotating a div clockwise and anticlockwise -
i found link on how rotate div using jquery.
rotating div element in jquery , more articles too.
the code follows
$(function() { var $elie = $("#wheel"); rotate(0); function rotate(degree) { // webkit browsers: e.g. chrome $elie.css({ webkittransform : 'rotate(' + degree + 'deg)' }); // mozilla browser: e.g. firefox $elie.css({ '-moz-transform' : 'rotate(' + degree + 'deg)' }); $elie.css({ '-ms-transform' : 'rotate(' + degree + 'deg)' }); // animate rotation recursive call settimeout(function() { rotate(++degree); }, 5); } });
could please me extend code rotating element clockwise , anticlockwise randomly steering wheel
you can extend jquery.animate() create jsfiddle
$.fx.step['degree']=function(fx){ if(! fx.deg){ fx.deg=0; if($(fx.elem).data("degree")){ fx.deg=$(fx.elem).data("degree") } } $(fx.elem).css({"webkittransform":"rotate("+math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+math.floor(fx.deg+(fx.end*fx.pos))+"deg)"}); $(fx.elem).data("degree",math.floor(fx.deg+(fx.end*fx.pos))); }
Comments
Post a Comment