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

如何使圖像旋轉直到停止函數被調用，但一旦調用它應該完成旋轉，以便它始終以某一點。我使用html5，javascript和jQuery。旋轉圖像，直到我停止它，但在html/css/jQuery中完成旋轉

btw。它應該在iOS，Android和Blackberry上運行，如果它做出任何更改？

基本上我得到這個CSS：

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

所以現在，動畫我只是類「紡」添加到我需要旋轉，當是應該停止刪除類。但是，一旦我刪除了課程，它會立即將它旋轉回0度。我想要的是這個動畫，但是當我停止它時，它應該完成它的當前旋轉。

編輯：

我已經使用jQuery嘗試過，但無法弄清楚如何把而不是「旋轉360」

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

來源

2014-06-10 pjensen68321

你的動畫代碼是什麼樣的？ – isherwood

我編輯了我的問題！ – pjensen68321

您必須檢測當前的旋轉角度並使用jQuery完成旋轉。爲了簡單起見，使用jQuery完成所有動畫可能會更好。對其進行破解並使用該代碼更新您的問題。它可能會重新開放。 – isherwood

沒關係。所以我有一個解決方案，我很高興，因爲它不需要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; 
}

感謝尋找解決方案的幫助。

來源

2014-06-10 21:13:58 pjensen68321

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

回答

相關問題