swipe - 滑动事件处理

Question

我正在编码滑动以删除功能。它在第一个事件上运行良好，但是..如果我刷了两次......它似乎无法正常工作。

如果我向左滑动两次，我不知道为什么“删除”按钮会消失。

请在下面查看我的代码：

<div id="showlist">
<div id="btn_del">Delete</div>  
</div>

<style>
#showlist {
width:100%;
height:100px;
background:#DDD;
border-bottom:1px dashed #666;
}

#btn_del {
float:right;
margin-right:-60px;
background:red;
padding:5px;
display:none;margin; 
border:1px solid #FFF; 
margin-top:20px;
color:#FFF;
font:12px Arial;
font-wieght:bold;
border-radius:5px;
}
</style>

<script>
$('#showlist').bind({  
swipeleft: function() {    
$("#showlist").animate( {'width': '90%'}, 300 );
    $("#btn_del").fadeIn();

},  
swiperight: function() {    
$("#btn_del").hide();
$("#showlist").animate( {'width': '100%'}, 300 );
},
preventDefaultEvents: true
});

演示：http: //jsfiddle.net/Chae/uLwJg/2/

任何帮助将不胜感激。

来自首尔的蔡

Answer 1

我只是自己解决了这个问题。我将检查代码用于删除按钮对象的可见性。

$('#showlist').bind({  

swipeleft: function() {   
  chk = $("#btn_del").is(':visible');
  if (!chk) {
     $("#showlist").animate( {'width': '90%'}, 300 );
     $("#btn_del").fadeIn();
  } 
},  

swiperight: function() {    
  $("#btn_del").hide();
  $("#showlist").animate( {'width': '100%'}, 300 );
},

preventDefaultEvents: true
});