CODEWITHSUNDEEP
jquerytransform
user840250
user840250

Reputation: 746

jquery smooth rotate on mousemove

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

Upvotes: 0

Views: 3168

Answers (2)

Francois Borgies
Francois Borgies

Reputation: 2408

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})
        }
     } 
});

Upvotes: 0

Nelson Benítez León
Nelson Benítez León

Reputation: 50573

Use animate():

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

Upvotes: 1

Related Questions