0

要素を新しい高さと幅にアニメーション化してから、アイソトープですべての要素を再レイアウトしようとしています。これにはデモがあり、それを変更しようとしています。それはほとんど機能し、アニメーションは発生しますが、調整は行われません。その後、任意の要素をクリックすると、もう一度調整が行われます. アニメ化後に調整してほしい。

ここに私が試しているコードとデモがあります: 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');
  });



});

事前にご協力いただきありがとうございます。

4

1 に答える 1

3

reLayout を開始するには、animate の complete: オプションを使用します。

$(this).animate({
  "width": 400,
  "height":300
}, { 
  duration: 200, 
  complete: function(){ $container.isotope('reLayout'); }
});
于 2012-11-30T20:06:47.457 に答える