setInterval不适用于.css方法(无循环)

Question

我正在使用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),那没关系.可能是什么问题？

Answer 1

它旋转到 30度,而不是通过 30度.您需要跟踪它已旋转的距离:

$(document).ready(function(){
    var rotate = 0;
    setInterval(function(){ 
        rotate += 30;
        $bird_wing_left.css({
            transform: "rotate(" + rotate + "deg)"
        }, 1000)
    }, 3000);
});