CODEWITHSUNDEEP
javascriptjqueryjquery-uianimation
Tommy Brunn
Tommy Brunn

Reputation: 2562

jQuery slide list items "together" instead of individually

I have a list where each item is floating next to each other with three items on each row. I'm paginating this list so that I have a total of 6 items on two rows. The markup looks essentially like this (some stuff inside album_wrapper removed for brevity):

<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>

Now, when transitioning between pages, I'm using a sliding animation from left to right (or right to left, depending on which navigation arrow is clicked). If all the items are laid out one per row, it looks great - as all the elements are moved "together". However, when they're floating next to each other, it looks like each element is animated individually and disappears into nothingness.

This is very hard to describe, so I've made a jsfiddle displaying the problem: http://jsfiddle.net/Nevon/g6cU3/

My question is, how can I go about making the animation in the second example look like the animation in the first example?

If you need any more information, go right ahead and ask.

EDIT: There seems to be some confusion, as I was a bit unclear in my post. I'm my fiddle I'm hiding all the items, but on the actual website, I'm only hiding or showing a subset of the list items. In the screenshot below, there are an additional 6 items that aren't shown. They all belong to the same list. Screenshot from website

Upvotes: 1

Views: 3325

Answers (3)

Daniel Baulig
Daniel Baulig

Reputation: 11009

Have a look at this fiddle. It does what you want it to. You basicly have to slide the UL instead if the LIs. Howeverm you also need to get rid of the floating, because it breaks the animation. I use display: inline-block instead.

UPDATE: New fiddle. Slide out the entire container, hide the LI elements you do not want to display anymore, show those you want to display and slide in the container again. In the new fiddle I show and hide all of the LI elements. You can of course modify the selector to only select those you actually want to show / hide.

Upvotes: 0

Eric
Eric

Reputation: 97691

Just add a wrapper around the ul, and slide the ul by animating 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 */
}

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87083

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

Upvotes: 1

Related Questions