javascript - jQuery 幻灯片列表项 "together"而不是单独

Question

我有一个列表，其中每个项目都相邻 float ，每行三个项目。我正在对这个列表进行分页，以便我在两行中总共有 6 个项目。标记基本上如下所示(为简洁起见，删除了 album_wrapper 中的一些内容):

<ul id="albums">
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
    <li><div class="album_wrapper"><img src="#"></div></li>
</ul>

现在，在页面之间转换时，我使用从左到右(或从右到左，取决于单击哪个导航箭头)的滑动动画。如果所有项目每行布置一个，它看起来很棒 - 因为所有元素都“一起”移动。然而，当它们并排漂浮时，看起来每个元素都单独动画并消失在虚无中。

这很难描述，所以我制作了一个显示问题的 jsfiddle:http://jsfiddle.net/Nevon/g6cU3/

我的问题是，我怎样才能使第二个示例中的动画看起来像第一个示例中的动画？

如果您需要更多信息，请直接询问。

编辑:似乎有些困惑，因为我在我的帖子中有点不清楚。我是我的 fiddle ，我隐藏了所有项目，但在实际网站上，我只隐藏或显示列表项目的一个子集。在下面的屏幕截图中，还有 6 个未显示的项目。它们都属于同一个列表。

Answer 1

$('#hide_two').click(function(e) {
    $('#images_awful').hide('slide');
});
$('#show_two').click(function(e) {
    $('#images_awful').show('slide');
});