Что я делал в прошлом, так это вставлял заполнители div нулевого размера в точку, где я хочу вставить свой новый элемент.
Затем я анимирую этот заполнитель до нужного размера, затем вставляю скрытую версию элемента, которую я хочу показать, внутри заполнителя и постепенно отображаю его.
Как только постепенное появление завершено, я «разворачиваю» заполнитель, чтобы удалить его, используя следующий код:
// Essentially, this does the opposite of jQuery.wrap. Here is an example:
//
// jQuery('p').wrap('<div></div>');
// jQuery('p').parent().unwrap().remove();
//
// Note that it is up to you to remove the wrapper-element after its
// childNodes have been moved up the DOM
jQuery.fn.unwrap = function () {
return this.each(function(){
jQuery(this.childNodes).insertBefore(this);
});
};
Все функции анимации jQuery имеют обработчики «onComplete», которые позволяют запускать различные части анимации после их завершения, так что выполнение всего этого не слишком сложно.
Кроме того, очень полезно сохранить модель JavaScript всех ваших элементов вместо того, чтобы полагаться на медленный DOM-обход и метод jQuery .data ().