Javascript 隐藏其他浮动元素时，浮动元素会跳转

我有一个浮动元素的网格，我为它创建了一个过滤器。我希望此过滤器隐藏和显示项目，同时我希望项目通过过渡和淡入重新调整。。目前，这些项目只是跳跃

正如你在这里看到的：

如何使项目滑到其位置

代码如下：

HTML

JQUERY

$(document).ready( function() {


    $('.filters li').click( function () { 
        var data;

        data = $(this).attr('data');
        $('.items li').each( function() {
            if($(this).attr('data') !== data) {
                $(this).fadeOut();
            }
            else {
                $(this).fadeIn();
            }
        });

    });

});

---

您可以为淡入设置延迟，以确保淡出已完成

随着淡入，以下500毫秒延迟的持续时间稍长

$（文档）.ready（函数（）{
$（'.filters li'）。单击（函数（）{
var数据；
data=$（this.attr（'data'）；
$（'.items li'）。每个（函数（）{
if（$（this）.attr（'data'）！==数据）{
$（this.fadeOut（）；
}否则{
$（this.delay（525.fadeIn（））；
}
});
});
});
ul{
列表样式：无；
填充：0；
}
李先生{
浮动：左；
右边距：10px；
光标：指针；
}
.项目李{
宽度：100px；
高度：100px；
背景：#ccc；
浮动：左；
利润率：20px；
}


过滤器1
过滤器2
过滤器3
过滤器4




1
2
3
4
5
6
7
8
您可以为淡入设置延迟，以确保淡出已完成

随着淡入，以下500毫秒延迟的持续时间稍长


$（文档）.ready（函数（）{
$（'.filters li'）。单击（函数（）{
var数据；
data=$（this.attr（'data'）；
$（'.items li'）。每个（函数（）{
if（$（this）.attr（'data'）！==数据）{
$（this.fadeOut（）；
}否则{
$（this.delay（525.fadeIn（））；
}
});
});
});
ul{
列表样式：无；
填充：0；
}
李先生{
浮动：左；
右边距：10px；
光标：指针；
}
.项目李{
宽度：100px；
高度：100px；
背景：#ccc；
浮动：左；
利润率：20px；
}


过滤器1
过滤器2
过滤器3
过滤器4




1
2
3
4
5
6
7
8
是淡出和淡出的重叠使它们看起来像是在跳跃

尝试快速隐藏筛选出的项目并向下滑动适用的框：

$(document).ready( function() {


$('.filters li').click( function () { 
    var data;

    data = $(this).attr('data');
    $('.items li').each( function() {
        if($(this).attr('data') !== data) {
            $(this).slideUp();
        }
        else {
            $(this).delay(525).slideDown();
        }
    });

});

}))
 是淡出和淡出的重叠使它们看起来像是在跳跃

尝试快速隐藏筛选出的项目并向下滑动适用的框：

$(document).ready( function() {


$('.filters li').click( function () { 
    var data;

    data = $(this).attr('data');
    $('.items li').each( function() {
        if($(this).attr('data') !== data) {
            $(this).slideUp();
        }
        else {
            $(this).delay(525).slideDown();
        }
    });

});

}))
 正如我在评论中提到的，您需要一个不同于
fadeIn/Out
的操作，因为它涉及显示属性，并且不能设置动画或转换

设置非
显示

值的动画似乎更为优化

大概是这样的：

$（文档）.ready（函数（）{
$（'.filters li'）。单击（函数（）{
var数据；
data=$（this.attr（'data'）；
$（'.items li'）。每个（函数（）{
if（$（this）.attr（'data'）！==数据）{
$（this.addClass（'hidden'）；
}否则{
$（this.removeClass（'hidden'）；
}
});
});
});
ul{
列表样式：无；
填充：0；
}
李先生{
浮动：左；
右边距：10px；
光标：指针；
}
.项目李{
宽度：100px；
高度：100px；
背景：#ccc；
浮动：左；
利润率：20px；
过渡：所有。5s轻松；
}
李，隐藏{
身高：0；
宽度：0；
保证金：0；
不透明度：0；
字号：0；
}


过滤器1
过滤器2
过滤器3
过滤器4




1
2
3
4
5
6
7
8
正如我在评论中提到的，您需要一个不同于
fadeIn/Out
的操作，因为它涉及显示属性，并且不能设置动画或转换

设置非

显示值的动画似乎更为优化

大概是这样的：

$（文档）.ready（函数（）{
$（'.filters li'）。单击（函数（）{
var数据；
data=$（this.attr（'data'）；
$（'.items li'）。每个（函数（）{
if（$（this）.attr（'data'）！==数据）{
$（this.addClass（'hidden'）；
}否则{
$（this.removeClass（'hidden'）；
}
});
});
});
ul{
列表样式：无；
填充：0；
}
李先生{
浮动：左；
右边距：10px；
光标：指针；
}
.项目李{
宽度：100px；
高度：100px；
背景：#ccc；
浮动：左；
利润率：20px；
过渡：所有。5s轻松；
}
李，隐藏{
身高：0；
宽度：0；
保证金：0；
不透明度：0；
字号：0；
}


过滤器1
过滤器2
过滤器3
过滤器4




1
2
3
4
5
6
7
8
您需要一个不同于
fadeIn/Out
的操作，因为这涉及到
display
属性，并且无法设置动画或转换。我可以使用不透明度或可见性，但是项目仍然会占用DOM中的空间。这非常复杂。也许可以用动画来代替高度/宽度。耶，现在我想到了。这似乎不像我最初想的那么简单我举了一个又快又脏的例子作为答案
$(document).ready( function() {


$('.filters li').click( function () { 
    var data;

    data = $(this).attr('data');
    $('.items li').each( function() {
        if($(this).attr('data') !== data) {
            $(this).slideUp();
        }
        else {
            $(this).delay(525).slideDown();
        }
    });

});