jQuery: expanding and contracting boxes

In this post I'm going to take a step further with repeated jQuery animations creating a simple effect on boxes that allows us to expand and contract them over and over again. This process requires the use of the jQuery chain to concatenate animations.

We start with these CSS styles:

#container {
    width: 500px;
    height: 400px;
    background: silver;
    position: relative;
}

ul {
    width: 400px;
    height: 200px;
    background: orange;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -200px;
}

Then we can add the jQuery code within a setTimeout() loop:

$(document).ready(function() {

  window.setTimeout(function() {

   $('#container')
   .animate({width: 400, height: 300}, 1000)
   .find('ul')
   .animate({width: 200, height: 100, marginLeft: -100, marginTop: -50}, 1000)
   .end()
   .find('li')
   .animate({fontSize: '1.4em'}, 1000)
   .parent().parent()
   .animate({width: 500, height: 400}, 1000)
   .find('ul')
   .animate({width: 400, height: 200, marginLeft: -200, marginTop: -100}, 1000)
   .find('li')
   .animate({fontSize: '1em'}, 1000);
   
     window.setTimeout(arguments.callee, 2000);
   
   }, 1000);


});

By doing so, boxes are always centered, plus they contract and expand over a certain amount of time.

Demo

Live demo