Анимация размеров предметов в Isotope: Почему первый элемент выглядит странно?

Я учусь использовать Isotope и наткнулся на статью автора в блоге о том, как анимировать размеры элементов.

Я реализовал это для проекта, который разрабатываю. Он состоит из трех вертикальных колонок. Каждый элемент имеет размер 196px x 70px. Когда вы нажимаете на элемент, он увеличивается до 402px x 230px.

Все элементы правильно изменяют размер и заставляют Isotope обновлять макет - кроме первого элемента.

При щелчке на первом элементе все последующие элементы списка выстраиваются в одну вертикальную колонку - хотя места достаточно, и элементы должны обтекать первый элемент.

Щелчок на любом другом элементе списка приводит к правильному поведению. Только первый элемент ведет себя неправильно. Может ли кто-нибудь понять, что может быть причиной этого?

Вот мой тестовый пример: http://joshrenaud.com/pd/testcase/testcase.html

Код, который обрабатывает изменение размера, выглядит так:

    $('.child').click(function(){
        var $this = $(this);
        if ($this.hasClass('big')) {
            tileStyle = { width: 196, height: 70};
        }
        else {
            tileStyle = { width: 402, height: 230};
        }
        $this.children().children('.childDate').toggle();
        $this.children().children('.childDesc').toggle();
        $this.toggleClass('big');

        $this.find('.child-content').stop().animate( tileStyle );

        $('#container').isotope( 'reLayout' )

    });