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

Question

我正在尝试实现的jQuery效果有一个小问题。 我想要一个列表fadeIn ，当用户单击一个按钮fadeOut并再次fadeIn fadeOut时看起来好像在刷新。

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

目前，我得到一种不寻常的效果，即将列表项添加到列表中，然后淡出然后再淡入。理想情况下，我希望淡出发生在添加项之前。

如果您查看我的小提琴，您将会明白我的意思。

Answer 1

使用fadeOut回调。

更新的小提琴

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

$('#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参数。