Question

我目前正在使用jQuery animate来旋转图片。这是我的代码：

var wheel = $('#wheel');
wheel.on('click', function() {
    var angle = 500;

    $(wheel).animate({}, {
        start: function() {
            if (!isSpin) {
                console.log('Start spinning');
                wheel.css('transform', 'rotate(' + angle + 'deg)');
                isSpin = true;
            }
        },
        complete: function() {
            console.log('Finish spinning');
            isSpin = false;
        }
    });
});

如果图像完成旋转，我想旋转图像，但似乎完整功能中的代码无法正常工作，它在图像仍在旋转时运行。如何检测图像是否完成旋转？

Answer 1

在loop。

中运行转换

＆＃13;

function AnimateRotate(angle,repeat) {
    var duration= 1000;
    setTimeout(function() {
        if(repeat && repeat == "infinite") {
            AnimateRotate(angle,repeat);
        } else if ( repeat && repeat > 1) {
            AnimateRotate(angle, repeat-1);
        }
    },duration)    
    var $elem = $('#wheel');

    $({deg: 0}).animate({deg: angle}, {
        duration: duration,
        step: function(now) {
            $elem.css({
                'transform': 'rotate('+ now +'deg)'
            });
        }
    });
}

var wheel = $('#wheel');
wheel.on('click', function() {
  AnimateRotate(360,"infinite");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="wheel" src="https://opensource.org/files/google.png">

＆＃13;

如果图像完全旋转，则旋转

1 个答案: