JQuery 淡出/淡入以创建排序列表

JQuery fadeout / fadein to create sorted list

本文关键字：创建 排序 列表 淡入 淡出 JQuery      更新时间：2023-09-26

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

从理论上讲，这应该非常简单，但是我有很多问题无法正常工作。

我有一个div 块的列表。至少 1 个，最多 8 个，在一行或两行中。所有div 块高 250px，宽 25%...

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

然后，我有链接来显示部分或全部这些块，具体取决于单击的链接。

我的计划是淡出所有 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 块在以前的块淡出之前淡入，等等。

我尝试过排队并延迟"淡入"调用，但它并没有好多少，而且看起来不流畅或不可靠。

我知道有一些插件可以做排序列表，例如"同位素"插件，但我需要它在IE9中工作，所以它已经出来了。(如果有人知道一个适用于IE9的插件，我会很高兴的！

我只想对这些div 块做一个漂亮的简单淡出/输入排序列表，让它可靠、顺利地工作应该不会太难吗？！

如果外部容器也可以根据需要在高度上设置动画(始终为 250px 或 500px 高(，那将是一个巨大的额外奖励：o(

这是你所追求的那种东西吗？小提琴

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

j查询：

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

试试这个

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

小提琴：演示

试试这个：

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

来自 SidM ^^ 的更新小提琴

我在这个例子中使用了slideDown和slideUp。

.HTML：

<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>
<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>

Javascript：

$(function(){
$('#link1').click(function(){
$(".all").slideUp(500);
$(".category1").slideDown(500);
});
$('#link2').click(function(){
$(".all").slideUp(500);
$(".category2").slideDown(500);
});
    });

希望这对你有用。更新了小提琴链接。

相关文章：