jquery - 动画后的同位素重新布局

Question

我正在尝试将元素设置为新的高度和宽度，然后让同位素重新布局所有元素。有一个演示，我正在尝试修改它。它几乎可以工作，动画发生但没有进行任何调整，然后如果您再次单击任何元素，则会进行调整。我希望在动画之后进行调整。

这是我正在尝试的代码和演示：http: //jsbin.com/ifojiw/5/edit

JS：

$(function(){

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


  $container.isotope({
    itemSelector: '.element',
    masonry : {
      columnWidth : 120
    }
  });


  // change size of clicked element

  $container.delegate( '.element', 'click', function(){
    $(this).animate({
  "width": 400,
  "height":300
}, 200 );

    $container.isotope('reLayout');
  });



});

非常感谢您提前提供的帮助。

Answer 1

使用完整的：动画选项来启动重新布局。

$(this).animate({
  "width": 400,
  "height":300
}, { 
  duration: 200, 
  complete: function(){ $container.isotope('reLayout'); }
});