Question

我正试图测试一个带有切换slideUp / Down按钮的div，并且像往常一样将砖石洗牌到新的位置。按下切换按钮后，隐藏的项目会上下滑动，但是当我按下切换器时，内容会很好地滑动，但会被下面的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的新位置，所以我先隐藏然后触发容器调整大小。这可能不是最好的方法，但是我能想到的最简单的方法就是让它做你想做的事。

masonry.js不会洗牌

1 个答案: