显示/隐藏所有列表元素的效果

Question

I'm trying to build image gallery with folders. When user press on folder name it hides all the pictures and shows only pictures for this folder. I have managed to do it but when images are hiding or showing they change move to one column and then animate. How can I make them to stay in-line all the time?

$('#folderList li').click(function () {
    var folderToShow = $(this).attr('id');
    $('#galleryList li').hide("slide", {}, 1000);
    $('#galleryList li.' + folderToShow).show("slide", {}, 1000).css("display", "inline-block");
});

Example jsFiddle

Answer 1

Add a float property in your CSS

#galleryList ul li {
    display: inline-block;
    margin: 10px;
    float:left
}