TouchSlide仿微信左划删除【原创】

滑动选项列表

<ul>
    <li>
        <p class="select"><img src="image/select.png" /></p>
        <p class="name red">sausio</p>
        <p class="tel red">138383838</p>
        <div class="clear"></div>
        <p class="address">江苏省常州市-606</p>
        <a class="delete">删除</a>
    </li>
    <li>
        <p class="select"><img src="image/unselect.png" /></p>
        <p class="name grey2">sausio_2</p>
        <p class="tel grey2">1666666666</p>
        <div class="clear"></div>
        <p class="address">江苏省常州市222-606</p>
        <a class="delete">删除</a>
    </li>
</ul>

引入TouchSlide手机端滑动插件

<script src="js/TouchSlide.1.1.js"></script>

触屏滑动每个li选项

$(document).on("pagecreate","#ch_ad",function(){ $(".list_address li").on("swipeleft",function(){ $(this).animate({marginLeft:'-6.4rem'}); $(this).find('a.edit').animate({right:'7.6rem'}); $(this).find('.delete').animate({right:'0rem'}); }); $(".list_address li").on("swiperight",function(){ $(this).animate({marginLeft:'0rem'}); $(this).find('a.edit').animate({right:'1.2rem'}); $(this).find('.delete').animate({right:'-6.4rem'}); }); });