Question

我在页面中有一个div，它已经通过css＆＃34; transform：rotate（60deg）＆＃34;旋转到60degree。我想旋转和动画角度变量中的值，从它开始动画的当前度，即60度。

<script type="text/javascript">
    var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');

        });

    });
</script>
<style type="text/css">
    #div1
    {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 100px;
        left: 100px;
        border-spacing: 0;
        background-color: red;
        transform:rotate(60deg);
    }
</style>
<div id="div1">
    Text</div>
<div id="rotate" > Rotate</div>

它会旋转并设置动画，但会先将div重置为默认位置。请帮忙。谢谢。

Answer 1

这是一个跨浏览器的工作小提琴： http://jsfiddle.net/tNLSL/

var angle = 60;
$(document).ready(function () {
        var start = 60;
        var end = start + 90;
    $('#rotate').click(function () {
                $('#div1').animateRotate(start,end);
                start = end;
                end = end +90;    
    });

});
$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

Answer 2

尝试使用此Example fiddle

CSS

    #div1
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    border-spacing: 0;
    background-color: red;
    transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
}

JS

   var angle = 60;
$(document).ready(function () {
    $('#rotate').click(function () {
        angle += 90;
        $('#div1').animate({ rotate: angle }, {
            step: function (now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                $(this).css('transform', 'rotate(' + now + 'deg)');
            },
            duration: 3000
        }, 'linear');

    });

});

将div从特定程度旋转到另一个程度

2 个答案: