Animate multiple divs to same position

I got a couple of diamonds on my site (250px), by using the Diamonds.js I want to make a click event on one of the diamonds, so all the diamonds will move ontop of each other to af fixed position. Where the clicked box is on top. I want it to be a animation so you can see them all move. I would like to do it with Jquery or Javascript.

Html

    <div class="diamondswrap" id="flick">
            <a href="#" class="item">
            <div class="red">hejsa</div></a>
            <a href="#" class="item"><div class="blue">whub</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <a href="#" class="item"><div class="blue">Hello</div></a>
            <a href="#" class="item"><div class="red"> hejsa</div></a>
            <div class="box"></div>
        </div>