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.

回答1:

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

来源：https://stackoverflow.com/questions/7408489/isotope-and-jquery-ui-colliding