jquery smooth rotate on mousemove

Question

I would like to add some cool UI with rotating background on mouse move, like on icloud.com, for now I got the code below

 $("#VIEW").mousemove(function(e){ var pageCoords = e.pageX + e.pageY; var max = $(document).width() + $(document).height(); var p = (pageCoords/max)*30; $('#ROTATE').css({ 'transform':'rotate(' + p + 'deg)'}); });

problem is, this is realtime rotate, I like to make it slow, add some delay

Nelson Benítez León · Accepted Answer · 2013-03-29 15:30:14Z

1

Use animate():

$('#ROTATE').animate({ 'transform':'rotate(' + p + 'deg)'}, 600);

answered Mar 29, 2013 at 15:30

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user840250 Over a year ago

seems like does not work for me, not rotating at all, with no errors

user840250 Over a year ago

anyway thanks for advice about animate, jQueryRotate.js + $("#ROTATE").rotate({animateTo:p}) works for me.

Wessam El Mahdy Over a year ago

@user840250 it could work for you if you add a prefix to the transform to make it cross browser, ex; -moz-transform, -webkit-transform, -o-transfrom and -ms-transform. you could also use jquery version prior to 1.7.2, it will add the prefixes automatically.

Francois Borgies · Accepted Answer · 2013-03-29 15:30:41Z

I propose you to read this http://code.google.com/p/jqueryrotate/wiki/Examples. You have many examples for rotate images. For example :

$("#img").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:180}) }, mouseout : function() { $(this).rotate({animateTo:0}) } } });

Collectives™ on Stack Overflow

jquery smooth rotate on mousemove

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related