jquery delay function

Question

My delay function is not working in my jquery rotate function. I am not sure why.

Basically, my code will make my div turn an angle and it will stop at a certain angle. This works at the moment. However i added a delay so it it will work after 3 or 4 seconds.

However its not doing it.

$(window).load(function() {
 var $elie = $("#super");
 rotate(1);
 function rotate(degree) {
 $elie.css({
 '-webkit-transform': 'rotate(' + degree + 'deg)',
 '-moz-transform': 'rotate(' + degree + 'deg)',
 '-o-transform': 'rotate(' + degree + 'deg)',
 '-ms-transform': 'rotate(' + degree + 'deg)',
 'transform': 'rotate(' + degree + 'deg)'
 });
 console.log(degree);
 if (degree < 55) {
 timer = setTimeout(function() {
 rotate(++degree)
 }, 10)
 delay: 4000;
 }
 }
});​

• Roko C. Buljan: You know that you don't need all that browser-specific attributes? just 'transform' if you use an updated jQuery library

Answer 1

If you want to delay the rotation just make a 'setTimeout' around the delay function:

$(window).load(function() {
 var $elie = $("#super");
 setTimeout(function() {
 rotate(1);
 }, 4000)
 function rotate(degree) {
 $elie.css({
 '-webkit-transform': 'rotate(' + degree + 'deg)',
 '-moz-transform': 'rotate(' + degree + 'deg)',
 '-o-transform': 'rotate(' + degree + 'deg)',
 '-ms-transform': 'rotate(' + degree + 'deg)',
 'transform': 'rotate(' + degree + 'deg)'
 });
 console.log(degree);
 if (degree < 55) {
 timer = setTimeout(function() {
 rotate(++degree)
 }, 10)
 }
 };
});​

(also as mentioned removed the dalay: 4000, which don't has the effect you want!)

Fiddler example: http://jsfiddle.net/49VEe/

edit2:

You can use HTML5 transition to get the rotation effect instead of your recursive function (sample without delay:

$(window).load(function() {
 var $elie = $("#super");
 rotate(55);
 function rotate(degree) {
 $elie.css({
 '-webkit-transform': 'rotate(' + degree + 'deg)',
 '-moz-transform': 'rotate(' + degree + 'deg)',
 '-o-transform': 'rotate(' + degree + 'deg)',
 '-ms-transform': 'rotate(' + degree + 'deg)',
 'transform': 'rotate(' + degree + 'deg)',
 '-webkit-transition': 'all 1s ease-in-out',
 '-moz-transition': 'all 1s ease-in-out',
 '-o-transition': 'all 1s ease-in-out',
 transition: 'all 1s ease-in-out'
 });
 };
});​

Fiddler: http://jsfiddle.net/mZzjP/

Answer 2

If you want the rotation to start after a few seconds, wrap the initial rotate(1); in a setTimeout like this:

setTimeout(function() { rotate(1); }, 3000); // 3 seconds

You should also remove delay: 4000; as that will only cause an error.

Answer 3

Try

if (degree < 55) {
 timer = setTimeout(function () {
 rotate(++degree)
 }, 10);
 delay: 4000; // remove this
}

into

if (degree < 55) { 
 timer = setTimeout(function () { rotate(++degree) }, 10);
}

You also need an initial setTimout like so

setTimeout( rotate(1), 4000 );

Fiddle here