Плавное появление одного элемента из другого?

Question

stichii @stichii

Плавное появление одного элемента из другого?

Добрый день! нужно чтобы кликая по кнопке(div) она плавно перетекала в див-контент и кнопка исчезала. и наоборот кликая по х див плавно менялся в кнопку.вот такой эффект нужен callbackhunter.com/.
вот сама разметка

<div class="img_cart_1">
        <div class="detail img_cart" id="img_cart_2"> кнопка </div>
</div>
    <div class="cart_product">
        <aside class="sidebar" role="complementary">
            <div class="sidebar-widget">
                <div id="woocommerce_widget_cart-2" class="woocommerce widget_shopping_cart" ><h3>Корзина</h3><div class="hide_cart_widget_if_empty"><div class="widget_shopping_cart_content">
                    <ul class="cart_list product_list_widget ">

                        <li class="empty">Корзина пуста.</li>
                    </ul><!-- end product list -->
                </div></div></div>
            </div>
            <div class="sidebar-widget">
            </div>
        </aside>
        <!-- /sidebar -->
        <div id="main-detail-x">x</div>
    </div>

.img_cart {
        right: 100px;
        bottom: 30px;
        z-index: 20;
        position: fixed;
        -webkit-transition: width .6s ease,height .6s ease,opacity .6s ease,background .3s ease!important;
         transition: width .6s ease,height .6s ease,opacity .6s ease,background .3s ease!important;
        background: #D70016!important;
        border-radius: 32px!important;

    }
    .cart_product {
        position: fixed;
        bottom: 30px;
        z-index: 10;
        right: 105px;
        max-width: 420px;
        width: 100%;
    }
    .cart_product {
        background: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    #main-detail-x {
        border: solid 1px #CD0428;
        width: 25px;
        height: 25px;
        font-size: 16px;
        text-align: center;
        border-radius: 11px;
        -moz-border-radius: 11px;
        -webkit-border-radius: 11px;
        position: absolute;
        top: -20px;
        background: rgba(0, 0, 0, 0.8);
        left: -20px;
        cursor: pointer;
        color: #F5DEE0;
    }

и сам скрипт:

$(document).ready(function(){
        var objNew=$('.img_cart_1');
        var objNewsDetail=$('.cart_product');
        objNewsDetail.css('display','none');
// кликаем корзину
        $("body").on ('click','.img_cart_1',function() {
            objNewsDetail.css('display','block');
            objNewsDetail.appendTo('body');
            objNew.css('display','none');

        });

        // кликаем х
        $("body").on ('click','#main-detail-x',function() {
            objNew.appendTo('body');
            objNewsDetail.css('display','none');
            objNew.css('display','block');
        });
    });/*end  ready*/

Не подскажете в каком направлении двигаться чтобы добиться такого эффекта? Просто сейчас получается все резко.