Effect chart
First step: Load
<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.mobile-1.3.2.min.js" ></ Script>
Step Two: HTML
<div class= "Item-wrap" >
<div class= "Item Clearfix" >
<div class= "Img-item" >
</div>
<div class= "Txt-item" >
<p class= "name" >
small Yellow
</p> <p class= "txt" > Small yellow people yellow small yellow people small yellow people
</p>
</div>
<i class= " Arrow "></i>
<a class=" delect-btn "> Delete </a>
</div>
<div class=" item Clearfix ">
<div class=" Img-item ">
</div>
<div class= "Txt-item" >
<p class= "name" >
small yellow person
</p>
<p class= "TXT" > Yellow small yellow people small yellow people yellow people
</p>
</div>
<i class= "Arrow" ></i>
<a class= " Delect-btn "> Delete </a>
</div>
</div>
Step Two: CSS
. item-wrap{Overflow:hidden;
Item-wrap. item{border-bottom:1px #fff solid;
Background: #000;
width:125%;
Overflow:hidden;
position:relative;
Display:-webkit-box;
-webkit-transition:all 0.3s linear;
}. Item-wrap. Item. img-item{width:50px;
height:50px;
margin:10px;
}. Item-wrap. Item. img-item img{width:100%;
border-radius:50%;
}. Item-wrap. Item. txt-item{padding-top:10px;
margin-right:25px;
font-size:14px;
line-height:24px;
Color: #fff;
-webkit-box-flex:1;
}. Item-wrap. Item. arrow{width:0;
height:0;
line-height:0;
font-size:0;
Border-style:solid;
Border-color:transparent Transparent transparent #fff;
border-width:8px 0px 8px 8px;
Position:absolute;
right:22%;
top:50%;
Margin-top: -8px;
}. delect-btn{width:20%;
margin-left:15px;
Color: #fff;
Background: #0f0;
z-index:999;
Display:block;
Text-align:center;
padding-top:5%; }. Item-wrap. selected{-webkit-transForm:translate (-16%);
-webkit-transition:all 0.3s linear;
}
Step Two: JQ
<script>
$ (". Item"). On (' Swipeleft ', function (event) {
event.preventdefault ();
/* ACT on the event */
$ (this). AddClass (' selected '). Siblings ('. Item '). Removeclass (' selected ');
$ (this). Find ('. delect-btn '). On (' click ', Function (event) {
event.preventdefault ();
/* ACT
on the event/$ (this). Parent (". Item"). Animate ({
height:0,
width:0}, +
, function () {
/* Stuff to did after animation is complete/
$ (this). Remove ();
});};
})
; $ (". Item"). On (' Swiperight ', function (event) {
event.preventdefault ();
/* ACT on the event *
/$ (this). Removeclass (' selected ');
});
</script>
The above JQ implementation of the left-sliding Display Delete button, click Delete to delete the data function (recommended) is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.