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

Show/hide effect for all list elements

本文关键字:列表元素 隐藏所 显示      更新时间:2023-09-26

我正在尝试用文件夹构建图像库。当用户按下文件夹名称时,它隐藏了所有的图片,只显示这个文件夹的图片。我已经设法做到这一点,但当图像隐藏或显示他们改变移动到一列,然后动画。我怎样才能使它们始终保持在直线上?

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

例子jsFiddle

在CSS中添加一个float属性

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