为什么动画只能工作一次，而其他的效果却按需要每次点击都能工作呢？
为什么动画只能工作一次，而其他的效果却按需要每次点击都能工作呢？
提问于 2017-05-25 02:54:36
我希望‘块’效果和‘按钮旋转’每次点击'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)"});
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-25 03:23:07
问题是，当旋转元素时，now变成360，这是相同的旋转值，所以它不会再次旋转。
来解决这个。通过添加另一个rotation将动画的rotation:360后的animation()重置为rotation:0
.animate(
{rotation: 0},
{duration: 0,
step: function(now, fx){
ThisIt.css({"transform": "rotate(" + now + "deg)"});
}
});Demo
$("#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44171532
复制相关文章
相似问题
腾讯云开发者
