为什么动画只起作用一次，而其他效果却随着每次点击而起作用？

Question

我想要 'block' 效果和 'button rotation' 到运行每次 'clickMe'按钮被点击，但是旋转动画只有运行s一次。为什么？

它应该只是一个简单的 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，这是相同的旋转值，所以它不会再次旋转。 .

为了解决这个问题 .. 通过添加另一个 animation()[= 将 rotation:360 之后的动画 rotation 重置为 rotation:0 19=]

.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>

为什么动画只起作用一次，而其他效果却随着每次点击而起作用？

Why does the animation work only once, yet the other effects work with each click, as desired?

jquery

onclick

jquery-animate