CODEWITHSUNDEEP
javascriptjqueryhtml
Liam
Liam

Reputation: 9855

Loop functions, animate css rotation

Im trying to create a function that animate a transition and then once it has done this, animates the rotation back to its starting point and loops this infinitely.

I have the following only I cant get the animation working nor the return to default?

http://jsfiddle.net/QfeC2/

function drunk(){
    $('div').css({'-webkit-transform':'rotate(1deg)'});
    $('div').delay(4000).css({'-webkit-transform':'rotate(0deg)'});
}

setTimeout(function() { drunk(); }, 2000);

Upvotes: 0

Views: 2206

Answers (3)

Aesdotjs
Aesdotjs

Reputation: 192

If you're animating with css why not using pure CSS? You can wrap the animation property in a Class and toggle that class in JS.

div {
  -webkit-animation:anim 2s ease infinite;
}
@-webkit-keyframes anim 
{
  0 {-webkit-transform:rotate(0deg);}
  50% {-webkit-transform:rotate(1deg);}
  100% {-webkit-transform:rotate(0deg);}
}

Updated fiddle

Upvotes: 0

JF it
JF it

Reputation: 2403

see your updated fiddle: http://jsfiddle.net/QfeC2/3/

function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');

// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
    duration: 2000,
    step: function(now) {
        // in the step-callback (that is fired each step of the animation),
        // you can use the `now` paramter which contains the current
        // animation-position (`0` up to `angle`)
        $elem.css({
            transform: 'rotate(' + now + 'deg)'
        });
    },
    complete: function(){
        AnimateRotate(360);
    }
});
}
AnimateRotate(360);

UPDATE

to rotate back after each cycle:

http://jsfiddle.net/QfeC2/9/

var boolDirection = true;

function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');

// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
    duration: 2000,
    step: function(now) {
        // in the step-callback (that is fired each step of the animation),
        // you can use the `now` paramter which contains the current
        // animation-position (`0` up to `angle`)
        $elem.css({
            transform: 'rotate(' + now + 'deg)'
        });
    },
    complete: function(){
        if(boolDirection)
        {
        AnimateRotate(-360);
            boolDirection = false;
        }
        else
        {
            AnimateRotate(360);
            boolDirection=true;
        }
    }
});
}
AnimateRotate(360);

Upvotes: 0

Anton
Anton

Reputation: 32581

.delay() only works when you are using jquery animation, you must use setTimeout

function drunk() {
    $('div').css({
        '-webkit-transform': 'rotate(1deg)'
    });
    setTimeout(function () {
        $('div').css({
            '-webkit-transform': 'rotate(0deg)'
        });
    }, 4000);
}

setTimeout(function() { drunk(); }, 2000);

DEMO

Use setInterval for continous loop

setInterval(function(){drunk();},8000);

DEMO

Upvotes: 1

Related Questions