animate с jQuary и hammer

[Dirada]

Товарищи, давайте поможем все дружно мне!))

Пытаюсь сделать анимацию, когда  плавно подымается div1 наверх он должен волочить за собой другой div2, который растягиваясь закрывает страницу div3.Так же и обратно, когда div1 отпускается он сворачивает этот div2, который открывает div3. Так вот, div1 плавно двигается по странице это получилось,а вот чтоб он тащил за собой div2 ну ни как, ведет себя как вздумается, и еще не знаю как его свернуть(

может чё подскажите??? 

 

html

  <div id="div3" style="height: 100%;align-self: center;width: 28%;background-color:yellow;position:absolute; float: none;">

    <div style="width: 100%; height: 18%; background-color: #253fff; z-index:999; position: absolute" id="div1"></div>

    <div id="div2" style="border:none; position: absolute; z-index: 99; width: 27.8%; height: 0%; bottom: 0px; background:blue"> </div>

 </div>

<script>

 var topNum = 0;

    var maxTop = $('#div3').height() - $('#div1').height();

    function onPan(ev) {

 

        if(ev.type == 'panstart'){

            //console.log("topNum"+topNum);

            topNum = $('#div1').position().top;

           

        } else if(ev.type == 'panend' || ev.type == 'pancancel'){

            console.log("topNum"+topNum+"ev.deltaY"+ev.deltaY);

            if(topNum + ev.deltaY < maxTop * 0.3){

                $('#div1').animate({'bottom': 0}, 300);

                $('#div2').animate({'bottom': 0});

            } else if(topNum + ev.deltaY >= maxTop * 0.3 && topNum + ev.deltaY <= maxTop * 0.8){

                $('#div1').animate({'top': maxTop * 0.6}, 300);

                $('#div2').animate({height:'500'},330);

            } else {

                $('#div1').animate({'top': maxTop}, 300);

                $('#div2').animate({'height': maxTop}, 330);

            }

        }

 

        if(topNum + ev.deltaY < 0 || topNum + ev.deltaY > maxTop) return;

        $('#div1').css('top', topNum + ev.deltaY);

        $('#div2').css('top', topNum + ev.deltaY);

    }

 

    var hammer = new Hammer.Manager(document.getElementById('div1'));

    hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_VERTICAL, threshold: 10 }));

    hammer.on("panstart panmove panend pancancel", onPan);

</script>