Animate both width and horizontal margins maintaining box size

I have an UL with all LIs being squared and floated to the left. I want to animate them so that they start with 50% of their size grow both in width and height but maintaining their position.

The only way I can think of (without adding new markup) is starting with margins (25% of width and height on each) and reduce margin while increasing dimentions. However, jQuery's animate() does not maintain constant the sum: margin-left+width+margin-right, even if using linear ease.

How can I animate a DIV using jQuery's animate()?

Here's my code.. Initial state:

items.css({
       opacity:0,
       marginTop: 17,
       marginRight: 17,
       marginBottom: 18,
       marginLeft: 19,
       width: 78,
       height: 78
    });

Animation:

开发者_运维知识库

items.animate({
        opacity:1,
        marginTop: 0,
        marginRight: 0,
        marginBottom: 1,
        marginLeft: 2,
        width: 112,
        height: 112
    }, 'slow', 'linear');

---

Here is an example: http://jsfiddle.net/TabUc/1/

EDIT: Here's a fix for the divs and buttons shaking http://jsfiddle.net/jYHtr/2/