Isotope and jquery UI colliding

I am doing a masonry-style page with boxes that expand when clicked. I have made the javascript code so that all other boxes will default开发者_运维知识库 to their original size when another box is clicked; that is: only one box will be expanded at a time.

It works fine!

The thing is that isotope doesn't animate the resizing of boxes, only the repositioning!

So I've invoked the jquery UI plugin to animate that toggle class function, so that not only the repositioning of elements will be animated, but also the very expanding of the element itself.

BUT alas, something in jquery UI and isotope doesn't quite fit together, meaning that the repositioning of elements somehow messes up.

The javascript code for the examples is this:

First the one that works:

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize');
    $(this).toggleClass('maxsize');
    $container.isotope('reLayout');
    return false;
  });

});

Then the one that doesn't work (notice that the milliseconds is the only difference between the two examples):

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize', 300);
    $(this).toggleClass('maxsize', 300);
    $container.isotope('reLayout');
    return false;
  });

});

Does anyone know what the problem is, or how to solve it? Thank you all very much in advance.

//A.

See Isotope - Animating item sizes. It features a 4 minute video on the problem you're running into.