爲什麼動畫只能使用一次，而其他效果可以根據需要每次點擊使用？

Question

我想要'塊'效果和'按鈕旋轉'運行每點'clickMe'按鈕被點擊，但旋轉動畫只運行一次。爲什麼？

它應該只是一個簡單的jQuery演示有一個按鈕效果div，而該按鈕旋轉。我試圖避免我的問題，但我無法解決這個問題。試過Chrome和Firefox。先謝謝你。

$("#clickMe").click(function(){ 

    // This happens with each click... as I wish for all the code! 
    $("#block1").fadeOut(2000); 
    $("#block1").delay(6000).slideDown(3000); 

    // This works only once, but I don't understand why. 
    $(this).animate(
    {rotation: 360}, 
    {duration: 1000, 
     step: function(now, fx){ 
      $(this).css({"transform": "rotate(" + now + "deg)"}); 
     } 
    }); 
}); 

Answer 1

問題是當旋轉now變得360，這是旋轉相同的值，所以它不會再次旋轉元素..

爲了解決這個 ..復位動畫rotation:360到rotation:0後的rotation通過添加另一個animation()

.animate(
    {rotation: 0}, 
    {duration: 0, 
    step: function(now, fx){ 
     ThisIt.css({"transform": "rotate(" + now + "deg)"}); 
    } 
}); 

演示

$("#clickMe").click(function(){ 
 
    var ThisIt = $(this); 
 
    // This happens with each click... as I wish for all the code! 
 
    $("#block1").fadeOut(2000); 
 
    $("#block1").delay(6000).slideDown(3000); 
 

 
    // This works only once, but I don't understand why. 
 
    ThisIt.animate(
 
    {rotation: 360}, 
 
    {duration: 1000, 
 
    step: function(now, fx){ 
 
     ThisIt.css({"transform": "rotate(" + now + "deg)"}); 
 
     } 
 
    }).animate(
 
    {rotation: 0}, 
 
    {duration: 0, 
 
    step: function(now, fx){ 
 
     ThisIt.css({"transform": "rotate(" + now + "deg)"}); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="clickMe">Click Me</button> 
 
<button id="block1">BLOCK</button>