0

こんにちは皆さん、現在、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);
}
}
4

2 に答える 2

2

これは、私が作業した再利用可能なバージョンです。それがあなたを助けることを願っています。

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

});
于 2012-11-29T02:45:52.157 に答える
1

回転と停止のように見えますが、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);
    }
}​
于 2012-11-29T00:43:25.800 に答える