Question

我正在尝试将元素设置为新的高度和宽度，然后使用isotope重新布局所有元素。这是一个演示，我正在尝试修改它。它几乎可以工作，动画发生但没有进行任何调整，然后如果你点击任何元素进行第二次调整。我希望在动画之后进行调整。

以下是我正在尝试的代码和演示：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

使用完成：选项进行动画处理以启动reLayout。

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

动画后同位素重新播放

1 个答案: