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

我想让一个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;


}

---

你可能在期待这个

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();

---

您没有提供问题陈述。什么东西没有像你期望的那样工作？目前它只是持续反弹，3秒钟内没有反弹，然后停止，30秒钟后再次反弹，它只是持续反弹。你每秒都在运行动画代码。你能使用CSS3动画吗，还是真的需要使用Jquery？