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

时间:2015-07-27 11:31:34

标签: javascript jquery css

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

2 个答案:

答案 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)。