jQuery幻灯片列表项“一起”而不是单独

Question

我有一个列表，其中每个项目彼此相邻，每行有三个项目。我正在对此列表进行分页，以便我在两行中共有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/

我的问题是，如何让第二个例子中的动画看起来像第一个例子中的动画？

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

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

Answer 1

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

Answer 2

只需在ul周围添加一个包装，然后通过设置动画ul来滑动argin-left：

http://jsfiddle.net/Eric/XjhEx/

<div class="wrapper">
    <ul class="images">
        <li><img src="http://placekitten.com/200/120"></li>
        <li><img src="http://placekitten.com/200/120"></li>
        <li><img src="http://placekitten.com/200/120"></li>
        <li><img src="http://placekitten.com/200/120"></li>
        <li><img src="http://placekitten.com/200/120"></li>
        <li><img src="http://placekitten.com/200/120"></li>
    </ul>
</div>
<div id="controls">
    <a href="#" id="hide">Hide</a>
    <a href="#" id="show">Show</a>
</div>

$('#hide').click(function(e) {
    $('.images').animate({
        marginLeft: '-100%'
    });
    return false;
});

$('#show').click(function(e) {
    $('.images').animate({
        marginLeft: '0%'
    });
    return false;
});

.wrapper {
    width: 630px;
    overflow: hidden; /* Chop off the sliding-out ul */
}

ul.images {
    width: 100%;
    overflow: hidden; /* Clear contained floats */
}

Answer 3

看看this fiddle。它做你想要的。如果是LI，你基本上必须滑动UL。但是你还需要摆脱浮动，因为它打破了动画。我改为使用display: inline-block。

更新： New fiddle。滑出整个容器，隐藏您不想再显示的LI元素，显示要显示的元素并再次滑入容器。在新的小提琴中，我展示并隐藏了所有的LI元素。您当然可以修改选择器以仅选择您想要显示/隐藏的选择器。