masonry.js не будет перемешивать

Question

Я пытаюсь проверить наличие div с помощью переключателя slideUp / Down, и кладка кладется на новые места, как обычно.Когда нажимается тумблер, скрытый элемент скользит вверх и вниз, но когда я нажимаю на тумблер, содержимое скользит нормально, но перекрывается элементом div ниже и ничего не перемешивается.Есть предложения?

html

<div id="container">
  <div class="item">
    <h1>Title</h1>
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
  </div>
  <div class="item">
    <h1>Title</h1>
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
  </div>
  <div class="item">
    <h1>Title</h1>
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
    <div class="toggler"><a href="#">toggle</a></div>
    <p class="hidden">
            This is the hidden text for the toggler.This is the hidden text for the toggler.
            This is the hidden text for the toggler. This is the hidden text for the toggler.
            This is the hidden text for the toggler. This is the hidden text for the toggler.
            This is the hidden text for the toggler. This is the hidden text for the toggler.
    </p> 
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
    </div>
  <div class="item">
    <h1>Title</h1>
    <p>
        Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
        tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
        Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
        tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
        a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
        suscipit suscipit arcu orci at est.
    </p>
  </div>
<div>

CSS

.item {
  width: 250px;
  margin: 5px;
  padding: 10px;
  background: #D8D5D2;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.hidden {
    display: none;
}

javascript

$(function(){
     $('#container').masonry({
        // options
        itemSelector : '.item',
        isAnimated: true
     }),

     $(".toggler").click
        (
            function($e) 
            {
                $(".hidden").slideDown("normal");   
            }
        );

    $(".toggler").toggle
        (
            function($e) 
            {
                $(".hidden").slideDown("normal");
            },

            function($e) 
            {
                $(".hidden").slideUp("normal");
            }
        );
});

Answer 1

Masonry.js запускает анимацию только при изменении размера контейнера. Вот почему функция анимации вызывается в контейнере div, а не в отдельных div. Вы можете подтвердить это, перейдя к их демонстрации и используя инструменты firebug / dev, чтобы скрыть div Ничего не происходит, пока размер контейнера не изменится. В первой строке раздела анимации (http://masonry.desandro.com/docs/animating.htm) также указывается, что его можно анимировать при изменении размера контейнера, что, как я бы сказал, является единственным методом запуска анимации.

Возможным решением может быть изменение размера контейнера как части вашего переключателя. Возможно, вам нужно будет посмотреть на плагин, чтобы увидеть, как именно он определяет, когда он был изменен, но я думаю, что даже расширение его на пиксель вызовет анимацию. Я предполагаю, что он определяет новые позиции для каждого элемента div после изменения размера, поэтому я сначала спрятался, а затем вызвал изменение размера контейнера. Вероятно, это не самый лучший метод, но я могу найти самый простой способ заставить его делать то, что вы хотите.