jQuery 3 秒后停止动画，30 秒后再次运行

Question

我想让一个 div 每 30 秒反弹 3 次，这将是一个购物车结帐提醒，它固定在屏幕右侧，应该反弹 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();