Від автора: на сайті CSS-Tricks ми вивчили три речі, давайте об’єднаємо їх. Перше – перехід на авторазмеры. Друге – сучасні методики Ajax. Третє – вимірювання розмірів зображень після завантаження. Маючи на увазі ці три чинника, ми можемо отримувати з допомогою Ajax’а якийсь довільний контент і вставляти на сторінку з плавною анімацією збільшення його висоти. Складно-то як!
Кінцеве демо:
Суть в тому, що ми в будь-якому випадку будемо використовувати JS. І так як ми використовуємо Ajax для отримання контенту, то плавну анімацію також можна написати на JS.
І за традицією «написання скриптів» ми повинні:
отримати по Ajax контент;
створити помилковий елемент з шириною, рівній того місця, куди планується вставити вміст;
вставити вміст в цей помилковий елемент;
виміряти помилковий елемент (точно);
вставити все це всередину реального тега (схлопнутого);
плавно збільшити висоту до виміряного значення;
почистити за собою.
Весь код з порядковими коментарями можна подивитися в демо.