使用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;
});