jquery - iPadのdivを別のdivにスライドさせる

Question

これは、MouseOver である div を別の div にスライドさせ、MouseOut で戻すことです。さて、iPadでmaindivに触れるとlowerdivがスライドしますが、スライドして戻って「タッチ」でmaindivを再度表示することがわかりません。jquery.ui.touch-punch.min.jsも試してみましたが反応なし。クリックまたはタッチするとスライドバックし、設定時間X後にタッチされない場合.誰かが助けてくれますか?

   <script language="JavaScript" type="text/javascript">
    <!--
        $(function(){
            $(".maindiv").hover(function(){
                $(this).children('.lowerdiv').stop().animate({top:0})
            },function() {
                    $(this).children('.lowerdiv').stop().animate({top:140})
                })

        })

    //-->
    </script>

    <style>
        .maindiv{
            height:66px;
            width:390px;
            background:#FFF;
            position:relative;
            overflow:hidden;
            float:left;
            margin:0px;
        }
        .lowerdiv{
        height:66px;
            width:390px;
            background:#FFF;
            position:absolute;
            top:140px;
    }
        </style>

     <div class="maindiv">
        //Main div content
        <div class="lowerdiv">
            //2. div content
        </div>
    </div>