CODEWITHSUNDEEP
javascriptjquery
bmurrell30
bmurrell30

Reputation: 715

Rotate image counterclockwise with JQueryRotate

I'm trying to rotate an image 180 degrees counterclockwise every time the user click's the image's parent element. I'm using JQueryRotate v2.3.

My code:

$('.material').click(function () {              
    var thisPic = $(this).find('.fanpic');
    thisPic.rotate({ animateTo: -180 });;
});

This works at first, but the image starts spinning clockwise with the second click onward. How can I fix this so the image always spins counterclockwise?

Upvotes: 0

Views: 714

Answers (2)

Alvaro Flaño Larrondo
Alvaro Flaño Larrondo

Reputation: 5734

Yo can keep a variable with the angle.

var angle = -180;
$('.material').click(function () {              
    var thisPic = $(this).find('.fanpic');
    thisPic.rotate({ animateTo: angle });
    angle -= 180;
});

Upvotes: 0

albciff
albciff

Reputation: 18517

Try keeping the rotate value at somewhere for example in the parent element:

$('.material').click(function () {
    if(!this.animateTo) this.animateTo = 0;
    this.animateTo = this.animateTo + -180;
    var thisPic = $(this).find('.fanpic');
    thisPic.rotate({ animateTo: this.animateTo });;
});

Try this jsfiddle

Hope this helps,

Upvotes: 1

Related Questions