Jquery stop animation after 3 secounds and run again after 30 seconds -

Jquery stop animation after 3 secounds and run again after 30 seconds -

i want create div bounce 3 times after every 30 secounds, shopping cart checkout reminder, fixed positioned right side of screen, should bounce 3 times, stop 30 secounds, , bounce 3 times again...and soon. used animate class because didn't bounce working when had fixed positioning..or think problem. anyways, here code.:

currently keeps on bouncing, dosen't stop after 3 seconds, , how create start bouncing 1 time again after 30 seconds?

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; }

you might expecting this

var baloon = $('.checkout'); function runit() { var intid = setinterval(function() { (var = 0; <= 3; i++){ baloon.animate({width:'+=4'}, 500); baloon.animate({width:'-=4'}, 500); } }, 30000); } runit();

jquery jquery-animate setinterval bounce