使用JQueryRotate逆时针旋转图像

Question

每当用户单击图像的父元素时，我都尝试将图像逆时针旋转180度。 我正在使用JQueryRotate v2.3。

我的代码：

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

首先可以使用，但是从第二次单击开始，图像开始顺时针旋转。 如何解决此问题，使图像始终逆时针旋转？

Answer 1

尝试将旋转值保持在例如父元素中的某个位置：

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

试试这个jsfiddle

希望这可以帮助，

Answer 2

可以随角度保持变量。

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