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

});