我正在使用setInterval尝试每隔3秒旋转一个图像并使用以下代码:
jQuery的:
$(document).ready(function(){
setInterval(function(){
$bird_wing_left.css({
transform: "rotate(30deg)"
}, 1000)
}, 3000);
});
CSS:
.bird_wing_left {
background: rgba(0, 0, 0, 0) url("../images/bird_wing_left.png") repeat scroll 0 0;
height: 59px;
left: 17px;
position: absolute;
top: 66px;
width: 78px;
transition: all 2s;
}
...但动画只发生一次而不是每3秒发生一次。如果我尝试另一种方法(不是.css),那没关系。可能是什么问题?
答案 0 :(得分:8)
它将旋转到 30度,而旋转 30度。你需要跟踪它已经旋转了多远:
$(document).ready(function(){
var rotate = 0;
setInterval(function(){
rotate += 30;
$bird_wing_left.css({
transform: "rotate(" + rotate + "deg)"
}, 1000)
}, 3000);
});
答案 1 :(得分:0)
您将图像始终旋转至30度,并在第一次旋转后旋转30°,因此不再旋转。你需要在var中保存度数的计数,并在每次迭代时增加它(当它达到360时也尝试将其设置为0)。