JQuery刷新列表效果-淡入淡出问题

JQuery Refresh List effect - FadeOut FadeIn Issue

本文关键字：淡入 淡出 出问题 刷新 列表 JQuery      更新时间：2023-09-26

我试图实现的jQuery效果有点小问题。我想给fadeIn一个列表，当用户再次单击按钮fadeOut和fadeIn时，它会显示出来，好像在刷新一样。

我在JSFiddle中找到了代码：

https://jsfiddle.net/javacadabra/qtppk74p/3/

基本上，HTML的结构如下，3个按钮决定显示哪个li，具体取决于按下哪个按钮。

<p>Please Choose a Job Category:</p>
<div id='sales' class='jbtn'>Sales Jobs</div>
<div id='it' class='jbtn'>IT Jobs</div>
<div id='hr' class='jbtn'>HR Jobs</div>
<div id='jobs-list'>
     <h2 id='jobs-title'></h2>
    <ul id='the-jobs-list'></ul>
</div>

JQuery检查单击了哪个按钮，并刷新添加新li元素的列表。

$('#sales').click(function () {
    refreshList()
    $('#jobs-title').html("Sales Jobs");
    $('#the-jobs-list').append("<li>Sales Job 1</li>");
    $('#the-jobs-list').append("<li>Sales Job 2</li>");
    $('#the-jobs-list').append("<li>Sales Job 3</li>");
});
$('#it').click(function () {
    refreshList()
    $('#jobs-title').html("IT Jobs");
    $('#the-jobs-list').append("<li>IT Job 1</li>");
    $('#the-jobs-list').append("<li>IT Job 2</li>");
    $('#the-jobs-list').append("<li>IT Job 3</li>");
});
$('#hr').click(function () {
    refreshList()
    $('#jobs-title').html("HR Jobs");
    $('#the-jobs-list').append("<li>HR Job 1</li>");
    $('#the-jobs-list').append("<li>HR Job 2</li>");
    $('#the-jobs-list').append("<li>HR Job 3</li>");
});
function refreshList() {
    $('#the-jobs-list').fadeOut();
    $('#the-jobs-list').empty();
    $('#the-jobs-list').fadeIn();
}

目前，我得到了一个不同寻常的效果，即列表项目被附加，然后淡出，再淡出。理想情况下，我希望淡出发生在项目的附加之前。

如果你看看我的小提琴，你就会明白我的意思。

使用fadeOut回调。

更新的fiddle

本质上，不是让所有数据一起运行，而是通过在回调函数中执行这些操作来更新数据，然后淡出，回调函数只有在淡出完成后才会触发。

$('#the-jobs-list').fadeOut(400, function () {
    $('#the-jobs-list').empty();
    $('#jobs-title').html("Sales Jobs");
    $('#the-jobs-list').append("<li>Sales Job 1</li>");
    $('#the-jobs-list').append("<li>Sales Job 2</li>");
    $('#the-jobs-list').append("<li>Sales Job 3</li>");
    $('#the-jobs-list').fadeIn();
});

在文档中，它被命名为complete参数。

相关文章：