swiping event handling - swipe

Question

I am coding swipe to remove functions. It works fine on the first event but..if I swipe twice...it doesn't seem to work properly.
I don't know why "Delete" button disappears if I swipe left twice.
Please see my code below:
<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
});
Demo:
http://jsfiddle.net/Chae/uLwJg/2/
Any help would be very appreciated.
Chae from Seoul

Answer 1

I have simply solved the problem myself.
I put the checking code for visibility of delete button object.
$('#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
});