Home/ Questions/Q 6223703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:32:10+00:00

I have a list where each item is floating next to each other with

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0