javascript - jQuery旋转功能不起作用

Question

大家好，目前我正在尝试弄清楚如何旋转 div 并使其停在某个位置。我在这方面得到了一些帮助，但是我不确定我做错了什么。对代码的任何帮助都会很棒。

<script type="text/javascript">
var $elie = $("#super");
rotate(1);

function rotate(degree) {
$elie.css({
    WebkitTransform: 'rotate(' + degree + 'deg)'
});
$elie.css({
    '-moz-transform': 'rotate(' + degree + 'deg)'
});

if (degree < 1196) {
    timer = setTimeout(function() {
        rotate(++degree);
    }, 1);
}
}

Answer 1

这是我开始工作的可重用版本。希望它可以帮助你。

$(function () {

    var rotateAnimation = function (props) {
        // init animation props
        var rotateEl = props.el,
            curAngle = props.startAngle,
            endAngle = props.endAngle;
        // scope angle to parent function
        var angleValue = 'rotate(' + curAngle + 'deg)';

        // define worker function
        var rotate = function () {
            // increment the angle
            curAngle += props.increment;

            // see if we are done animating
            if (curAngle >= endAngle) {
                curAngle = endAngle;
                clearInterval(timer);//stop looping

            }
            // create css value 
            angleValue = 'rotate(' + curAngle + 'deg)';
            rotateEl.css({
                '-moz-transform': angleValue,
                '-webkit-transform': angleValue,
                '-o-transform': angleValue,
                '-ms-transform':angleValue
            });
        };

        var timer = setInterval(rotate, props.delay);//let the fun begin
    };

    $('#super').on('click', function () {
        rotateAnimation({
            el: $(this),
            startAngle: 0,
            endAngle: 1234,
            delay: 1,
            increment: 3
        });
    });

});

Answer 2

看起来它正在旋转和停止，但 1196 的值需要一段时间才能到达。这是一个关于正在发生的事情的jsfiddle。 http://jsfiddle.net/2x3Us/

html:

<div id="super" style="background-color: red">hello</div>​

Javascript：

var $elie = $("#super");
rotate(1);

function rotate(degree) {
    $elie.css({
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)'
    });

    console.log(degree);
    if (degree < 360) {
        timer = setTimeout(function() {
            rotate(++degree);
        }, 1);
    }
}​