Как превозмочь асинхронность анимации в jquery?

Question

[DmitryRise]

В целях исчезание текста в блоке, изменение текста в блоке при невидимости и появлении нового текста в блоке.
Не знаю, как побороть тот факт, что сначала проходит анимация.
Лог:

Исполняется функция FadeIn ко вторичному состоянию a.port
nav.js:16 Исполняется FadeOut изначального состояния a.port
nav.js:18 Исполняется функция changer

Почему сначала исполняется FadeIn? Почему так идет обработка?
Подскажите, пожалуйста, что я делаю не так.

var flag=0; //переменная состояния
var callbacks = $.Callbacks(); //переменная callbacks
function changer(value){
    $('a.port').text('Home')
};

function changerbehind(value){
    $('a.port').text('Portfolio')
};

$('document').ready(function(){
    $('.port').click(function () {
        if (flag==0) {
            callbacks.add(changer); //присовение колбеку функции changer
            $('a.port').fadeOut(3000, function(){ //коллбек после выпонения FadeOut
                console.log('Исполняется FadeOut изначального состояния a.port');
                callbacks.fire(changer()); //Исполнение функции changer
                console.log('Исполняется функция changer');
            });


            $('a.port').fadeIn(3000);
            console.log('Исполняется функция FadeIn ко вторичному состоянию a.port');
            flag = 1;
        }
        else{
            flag=0;
            $('a.port').fadeOut(3000, function(){ //коллбек после выполнения FadeOut
                console.log('Исполняется FadeOut вторичного состояния a.port');
                callbacks.remove(changer); //удаление функции changer из переменной callbacks
                callbacks.add(changerbehind()); //Добавление функции changerbehind  в переменную callbacks
                callbacks.fire(changerbehind()); //Исполнение changerbehind
                console.log('Исполняется функция changerbehind');
            });
            $('a.port').fadeIn(3000);
            console.log('Исполняется fadeIn к изначальному состоянию a.port');
        }
    });
});

Answer 1

[Александр Коротаев]

Превозмогать ничего не надо, просто нужно начать с этим работать

// здесь скрываем
$('a.port').fadeOut(3000, function(){ 
  // тут меняем текст
  //...
  // снова показываем элемент
  $('a.port').fadeIn(3000);
});