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

Просто добавьте обертку вокруг 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 2

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

Answer 3

Посмотрите на эту скрипку . Он делает то, что вы хотите. Вы должны просто сдвинуть UL вместо LI. Однако вам также нужно избавиться от плавающего, потому что оно нарушает анимацию. Я использую display: inline-block вместо.

ОБНОВЛЕНИЕ: Новая скрипка . Выдвиньте весь контейнер, скройте элементы LI, которые вы больше не хотите отображать, покажите те, которые вы хотите отобразить, и снова вставьте в контейнер. В новой скрипке я показываю и скрываю все элементы LI. Конечно, вы можете изменить селектор, чтобы выбрать только те, которые вы действительно хотите показать / скрыть.