javascript - jQuery刷新列表效果-FadeOut FadeIn问题

Question

我在尝试实现 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();
}

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

如果你看看我的 fiddle ，你就会明白我的意思。

Answer 1

使用 fadeOut 回调。

Updated 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();
});

在the docs它被命名为 complete 参数。