Jquery在3秒后停止动画，并在30秒后再次运行

Question

我想让div在每30秒后反弹3次，它将是一个购物车结账提醒，固定在屏幕右侧，它应该反弹三次，然后停止30秒，然后再次反弹3次。。。很快。目前我使用动画类，因为当我有固定的位置时，我没有得到弹跳工作。。或者我认为这就是问题所在。无论如何，这是代码

目前它只是继续弹跳，3秒后没有停止，如何让它在30秒后再次弹跳？

var baloon = $('.checkout');
function runIt() {
    var intID = setInterval(function() {
    baloon.animate({width:'+=4'}, 500);
    baloon.animate({width:'-=4'}, 500);
    }, 1000);
}
runIt();


<div class="checkout"> 
 <img src="img/checkout.png" alt="checkout"> 
 </div>

.checkout{
    width:26px;
    height:114px;
    top:50%;
    right:0px;
    float:right;
    position:fixed;
    z-index:10;

}

Answer 1

您可能会期待这个

var baloon = $('.checkout');
function runIt() {
    var intID = setInterval(function() {
        for (var i = 0; i <= 3; i++){
            baloon.animate({width:'+=4'}, 500);
            baloon.animate({width:'-=4'}, 500);
        }
    }, 30000);
}
runIt();