Плавная смена родителя
 

Ребят, подскажите как реализовать смену родительского контейнера у элемента, чтобы смена происходила не мгновенно, а с анимацией перехода.

То есть, допустим у нас есть:

<div id="parrent_1">
   <div id="child_1"><div>
<div>

<div id="parrent_2"><div>

А хотим получить:

<div id="parrent_1"><div>

<div id="parrent_2">
   <div id="child"><div>
<div>

Я понимаю что нужно просто append использовать, но тогда блок переместиться мгновенно, а я хочу чтобы он двигался как при animate. Как такое реализовать?

Если кому понадобится:

function moveAnimate(element, newParent) {
        element = $(element);
        newParent = $(newParent);

        var oldOffset = element.offset();
        element.after(newParent);
        var newOffset = element.offset();

        var temp = element.clone().appendTo('body');
        temp.css({
            'position': 'absolute',
            'left': oldOffset.left,
            'top': oldOffset.top,
            'z-index': 1000
        });
        element.hide();
        temp.animate({ 'top': newOffset.top, 'left': newOffset.left }, 'slow', function () {
            element.show();
            temp.remove();
        });

Сделай элемент невидимым, а после нужных действий добавь элементу .style.opacity= '1' ". При этом у элемента должно быть css-свойство transition.