Из вопроса не понятно, в каком состоянии находится блок #engine, но предположу, что он скрыт и после загрузки данных должен плавно появляться. В таком случае существует три варианта:
- использовать jQuery и его метод fadeIn()
- использовать другую либу для анимации, например, GSAP, Velocity и т.д.
- использовать CSS анимацию
Наиболее предпочтительным будет третий вариант, хотя бы потому, что не нужно перекладывать на JS то, что можно сделать средствами CSS. Суть этого варианта в том, что скрытый блок сначала показывается, а затем через минимальный промежуток времени анимируется его прозрачность. Такой хак делается потому, что свойство display нельзя анимировать.
Таким образом, имеем следующие стили:
#engine {
display: none;
opacity: 0;
}
#engine.active {
display: block;
}
#engine.animate {
opacity: 1;
transition: opacity 1s linear;
}
Перед отправкой AJAX-запроса блок #engine скрыт и прозрачен. После того, как данные получены, присваиваем блоку класс .active. Он по-прежнему не видим, поскольку прозрачен. Далее, через минимальный промежуток времени (думаю хватит 10мс), присваиваем блоку класс animate, что приводит к плавному появлению блока. В коде это будет выглядеть так:
$.get(...)
.success(function(data) {
$('#engine').html(data);
$('#engine').addClass('active').delay(10).queue(function() {
$(this).addClass('animate').dequeue();
})
})
Пример 