Эффект списка обновления JQuery - FadeOut FadeIn Issue

Question

У меня небольшая проблема с эффектом , которого я пытаюсь достичь. Я бы хотел, чтобы список был 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(); 
} 

На данный момент я получаю необычный эффект в котором элементы списка добавляются, а затем исчезать и исчезать обратно. В идеале я хотел бы, чтобы исчезать из произойдет перед добавляющим пунктов.

Если вы посмотрите мою скрипку, вы увидите, что я имею в виду.

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.