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

我对我试图实现的

jQuery

效果有点小问题。我希望列表显示为

fadeIn

，当用户再次单击按钮

fadeOut

和

fadeIn

时，列表显示为刷新状态

我在JSFIDLE中获得了代码：

基本上，

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>

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

---

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

使用

淡出

回调

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

$('#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();
});

$（“#作业列表”）.fadeOut（400，函数（）{
$（“#作业列表”）.empty（）；
$（“#职务名称”）.html（“销售职务”）；
$（“#工作列表”）。追加（“
销售工作1
”；
$（“#工作列表”）。追加（“
销售工作2
”；
$（“#工作列表”）。追加（“
销售工作3
”；
$（“#作业列表”）.fadeIn（）；
});

---

在中，它被命名为

complete

参数。

谢谢您的帮助，工作非常完美，我将在4分钟内接受答案，如果我可以的话。

$('#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();
});