Question

我在下面的代码中旋转一个div。问题是，当我再次点击它时，我不知道如何使元素从最后一个位置继续。我怎么做？（我能够以一种在IE中无效的方式实现）

HTML：

<div class="square">click me</div>

CSS：

.square {
    background:red;
    height:100px;
    width:100px;
    cursor:pointer;
}

JS：

$('.square').click(function () {
    rotate($(this), -180, 1000);
});

function rotate(element, degrees, speed) {
    element.animate({
        borderSpacing: degrees
    }, {
        duration: speed,
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        }
    });
}

Answer 1

您可以使用jQueryRotator ...

并使用js代码...

var value = 0
$("#image").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
    }    
});

工作小提琴是...... http://jsfiddle.net/se4xc/ 希望这对你有用。

Answer 2

抱歉，Illaya，我没有点击你的答案，因为我设法在没有外部jquery代码的情况下完成。我将JS改为：

$(document).ready(function () {


$('.square').click(function () {
       if ($(this).hasClass('folded')) {
            $(this).removeClass('folded');
            rotate($(this), 0, 700);
        } else {
            $(this).addClass('folded');
            rotate($(this), 180, 700);
        }
});

    function rotate(element, degrees, speed) {
        element.animate({
            borderSpacing: degrees
        }, {
            duration: speed,
            step: function (now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                $(this).css('transform', 'rotate(' + now + 'deg)');
            }
        });
    }
});

Updated JSFiddle

用jQuery旋转，记住位置

2 个答案: