javascript - JQuery 淡出/淡入创建排序列表

Question

我正在尝试使用 JQuery 创建排序列表。

理论上这应该非常简单，但我遇到了很多问题，这无法正常工作。

我有一个 div block 列表。至少 1 个，最多 8 个，排成一排或两排。所有 div block 的高度均为 250 像素，宽度为 25%...

-------------------------------------
|  div1  |  div2  |  div3  |  div4  |
-------------------------------------
|  div5  |  div6  |  div7  |  div8  |
-------------------------------------

然后，我可以通过链接来显示部分或全部这些 block ，具体取决于单击的链接。

我的计划是淡出所有 DIV，然后淡入所需的 DIV，我的代码如下所示...

<div id="container">
<div style="width:25% height:250px;" class="all category1">div1 content</div>
<div style="width:25% height:250px;" class="all category2">div2 content</div>
<div style="width:25% height:250px;" class="all category3">div3 content</div>
<div style="width:25% height:250px;" class="all category3">div4 content</div>
<div style="width:25% height:250px;" class="all category3">div5 content</div>
<div style="width:25% height:250px;" class="all category1">div6 content</div>
<div style="width:25% height:250px;" class="all category1">div7 content</div>
<div style="width:25% height:250px;" class="all category2">div8 content</div>
</div>

使用 JQuery 代码...

$('#link1').click(function(){
$(".all").fadeOut(300);
$(".category1").fadeIn(300);
});
$('#link2').click(function(){
$(".all").fadeOut(300);
$(".category2").fadeIn(300);
});

这确实起到了“某种”作用，但它非常跳跃并且一点也不平滑，DIV block 在前面的 block 淡出之前淡入，等等。

我尝试过排队和延迟“fadein”调用，但效果并没有好多少，而且看起来不流畅或不可靠。

我知道有一些插件可以对列表进行排序，例如“Isotope”插件，但我需要它在 IE9 中工作，所以就没有了。 (如果有人知道与 IE9 兼容的插件，我会很高兴!)

我只想对这些 div block 做一个简单的淡出/淡入排序列表，并且让它可靠且顺利地工作应该不会太难？!

如果外部容器也可以根据需要在高度上进行动画处理(始终为 250 像素或 500 像素高)，那将是一个巨大的额外奖励:o)

Answer 1

这就是你所追求的吗？ Fiddle

我在 FadeOut 完成后使用完成回调来触发 FadeIn() 函数，但是有一个技巧可以让它正常工作，我在这里找到了:Related Problem特别是第二条评论:“我使用 :visible 选择器来解决这个问题”。基本上它是在所有可见项目消失后调用 FadeIn() 函数。

jQuery:

$('#link1').click(function(){
    $(".all:visible").fadeOut(300, function() {
        $(".category1").fadeIn(300);
    });
});
$('#link2').click(function(){
    $(".all:visible").fadeOut(300, function() {
        $(".category2").fadeIn(300);
    });
});