rotate

In an earlier lesson you were introduced to jqRotate.js, the add-on function that allows you to rotate elements in an html page. In the previous lesson, rotation was activated by mouse clicks. It is also possible to use the setInterval function to create a timed rotation, so that the rotation event re-occurs based on milliseconds. Why? With this function you can start a rotation that doesn't stop, such as a record player or the tires on a car.

The setInterval function is extremely to use In the example immediately below any action that you place between the { } brackets, will be executed every 2000 milliseconds (which is the same as every 2 seconds).

setInterval(function() {
 // Do something every 2 seconds
 }, 2000);

In the following setInterval function, a variable named howfar, that increments +5 (as in 5, 10, 15, etc.) every 800 milliseconds, controls the rotation of an element with the class "munk."  The same setInterval function can also be used to move elements in a straight or diagonal line by incrementing the x and/or y  values

setInterval(function(){
 howfar+=5;
 $(".munk").rotate(howfar);},800);

 

 

Print Friendly, PDF & Email