скользящий div над другим для ipad

Question

это скользящий один div над другим на MouseOver и обратно на MouseOut. Теперь, на ipad, когда я касаюсь maindiv, он скользит по нижней части, но я не могу понять это, чтобы заставить его вернуться назад, чтобы снова показать 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> 

Answer 1

попробовать это:

я надеюсь, что это решит проблему парения в сенсорных устройствах :) (я тестировал на моем планшете, после снятия пальца/прикосновение, ниже DIV является слайд назад)

Не нужно использовать таймер или обнаруживать второе касание после некоторой задержки, которую я предлагаю.

ОБНОВЛЕНО:

var $mainDiv = $(".maindiv"), 
    $lowerDiv = $mainDiv.children('.lowerdiv'); 

function showHideChild(flag){ 

    var temp = (flag)? 0 : 140;  
    $lowerDiv.stop().animate({top:temp}); 
} 

$mainDiv.on({ 
    mouseover: function(){     
     showHideChild(true); 
    }, 
    mouseout: function() { 
     showHideChild(false); 
    }, 
    touchstart: function(){ 
     showHideChild(true); 
    }, 
    touchend: function(){ 
     setTimeout(function(){ 
      showHideChild(false); 
     },1500); 
    } 
}); 

работает скрипку здесь: http://jsfiddle.net/QwvtL/3/

Я надеюсь, что это помогает.