Question

我正在一个网站上工作，这里会有一个水平布局的中心元素列表。用户能够基于实际元素显示下方的一些锚点来过滤元素。我已经设置了一个演示基本功能的jsfiddle：http://jsfiddle.net/T6N9G/1/

在上面的示例中，要消失的项目会逐渐消失，这很好。问题是其他元素＆＃34;跳跃＆＃34;填充隐藏元素最终得到display: none时留下的空间。我正在寻找一种方法来将可见元素放入新空间。

在上面的小提琴中，需要调整以下几行（或者，如果可能，可以将CSS3过渡应用于元素）：

$("a").on("click", function(event){
    event.preventDefault();
    var color = $(this).attr("class");
    var $show = $(".container .item." + color);
    var $hide = $(".container .item:not(." + color + ")");

    $show.fadeIn();  // Change Me?
    $hide.fadeOut(); // Change Me?
});

我完全控制了这个项目，但我希望避免包含misc。 JS库来完成这样的小任务。是否有jQuery UI效果，或者CSS3过渡能够满足我的需求？

Answer 1

您可以使用动画链接分别为不透明度设置动画。

http://jsfiddle.net/CT5Ys/1/

$show.show(200).animate({opacity: 1}, {duration: 200});
$hide.animate({opacity: 0}, {duration: 200}).hide(200);

Answer 2

使用CSS过渡的一种解决方案。

我使用jQuery设置隐藏类

$("a").on("click", function(event){
    event.preventDefault();
    var color = $(this).attr("class");
    var $show = $(".container .item." + color);
    var $hide = $(".container .item:not(." + color + ")");

    $show.removeClass("hidden");
    $hide.addClass("hidden");

});

此类更改不透明度和大小：

.hidden {
    width: 0px !important;
    opacity: 0.7 !important;
    margin-right: -5px !important;
}

此更改有一个转换集

.container .item {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    display: inline-block;
    transition: opacity 1s 0s, width 1s 0.5s, margin 1s 0.5s;
}

fiddle

你可以玩时间来实现不同的风格

jQuery / CSS3将元素放入空白区域后淡入淡出

2 个答案: