Есть такой код: success: function(data) { $('#engine').html(data);} как сделать плавное появление блока?

Question

[mrWan]

Как видно выше, идет загрузка контента с помощью ajax.

Answer 1

[kulaeff]

Из вопроса не понятно, в каком состоянии находится блок #engine, но предположу, что он скрыт и после загрузки данных должен плавно появляться. В таком случае существует три варианта:

1. использовать jQuery и его метод fadeIn()
   
2. использовать другую либу для анимации, например, GSAP, Velocity и т.д.
   
3. использовать 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();
    })
  })

Пример

Answer 2

[Ernest Fayzullin]

без jquery)

var element = document.getElementById(id);
fade(element);