Question

如何调整图像直到调用停止函数，但是一旦调用它就应该完成旋转，以便它始终在某一点结束。我使用的是html5，javascript和jQuery。

顺便说一句。它应该在iOS，Android和Blackberry上运行，如果它做出任何改变吗？

基本上我得到了这个css：

.spinning{
    -webkit-animation: spin 2s infinite ease;
}
@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)} 
    100% {-webkit-transform: rotate(360deg)}
}

所以现在，要动画我只需添加课程＆＃34;旋转＆＃34;到我需要旋转的东西，并在应该停止时移除类。但是一旦我删除了课程，它会立即将其旋转回0度。我想要的是这个动画，但当我停止它时，它应该完成它当前的旋转。

编辑：

我尝试过使用jQuery，但无法弄清楚要放什么而不是＆＃34;轮换：360＆＃34;

function startAnimation(){
    $('#refreshButtonImage').animate(
        {rotation: 360},
        1000,
        function(){
        startAnimation();
    });
};

Answer 1

好。所以我得到了一个我非常高兴的解决方案，因为它不需要javaScript来运行实际的动画。

的CSS：

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

JavaScript的：

var keepSpinning = false;
function spin() {
    $('#Image').animate({
            borderSpacing: -360
        }, {
            start: function () {
                $('#Image').css({
                    '-webkit-animation': 'spin 2s 1 ease'
                });
            },
            complete: function () {
                $('#Image').css({
                    '-webkit-animation': ''
                });
                if (keepSpinning){
                    spin();
                }
            },
            duration: 2000
        });
}
function startSpin(){
    keepSpinning = true;
    spin();
}
function stopSpinning(){
    keepSpinning = false;
}

感谢您帮助找到解决方案。

旋转图像直到我停止它，但在html / css / jQuery中完成旋转

1 个答案: