Сразу виден конечный результат. Почему функции не выполняются последовательно?

Question

[v-lukoyanov]

function animationDiv() {
$('.first-section .first-title, .first-section .second-title').delay(3000).fadeOut(700);
$('.first-section .first-title').html('Общая емкость 5712 паллето мест');
$('.first-section .second-title').html('Работаем круглосуточно');
$('.first-section .first-title, .first-section .second-title').fadeIn(700).delay(3000).fadeOut(700);
$('.first-section .first-title').html('Офисные помещения в аренду');
$('.first-section .second-title').html('Оборудованные минимаркеты для продажи товара рядом с хладокомбинатом');
$('.first-section .first-title, .first-section .second-title').fadeIn(700).delay(3000).fadeOut(700);
$('.first-section .first-title').html('Полностью автоматизированный склад класса А');
$('.first-section .second-title').html('Температурный режим до -25 С');
$('.first-section .first-title, .first-section .second-title').fadeIn(700);
}

Answer 1

[Pretor DH]

Или подойти по другому и явно распаралелить потоки:

function animationDiv() { 
$('.first-title, .second-title','.first-section').delay(500 /*3000*/)     //  пауза забольшая 500мс для пустототы достаточно
.fadeOut(700,function(){
     $('.first-title','.first-section').html('Общая емкость 5712 паллето мест');
     $('.second-title','.first-section').html('Работаем круглосуточно')
}).fadeIn(700)
.delay(3000)
.fadeOut(700,function(){
     $('.first-title','.first-section').html('Офисные помещения в аренду');
     $('.second-title','.first-section').html('Оборудованные минимаркеты для продажи товара рядом с хладокомбинатом')
}).fadeIn(700)
.delay(3000)
.fadeOut(700,function(){
     $('.first-title','.first-section').html('Полностью автоматизированный склад класса А');
     $('.second-title','.first-section').html('Температурный режим до -25 С')
}).fadeIn(700);
}

JSFiddle