html5 - Creating a smooth swipe behavior using jQueryMobile which reveals a div -

what im trying reveal content while sliding right/left. im basing behavior on simple event "on swipeleft" doesn't give me intended to.

 $("li").on("swipeleft",function(){         alert("you swiped left!");     }); 

i want while doing swipe, content of li move left , while happening fixed div revealed. hope suggest me right way doing because currentnly, alert i'm showing, appears after finish swipe , not while i'm doing it.

you absolutely position hidden divs @ right , left, , on swipe animate left/right margins reveal divs:

demo

<li><div class="leftfixed">div</div><a href="#">acura</a><div class="rightfixed">div</div></li> 

the css:

.leftfixed {     position: absolute;     top: 0;     bottom: 0;     left: 0;     width: 60px;     background-color: red;     color: white;     text-shadow: none;     z-index: 1;     display: none;     text-align: center; } .rightfixed {     position: absolute;     top: 0;     bottom: 0;     right: 0;     left: auto;     width: 60px;     background-color: red;     color: white;     text-shadow: none;     z-index: 1;     display: none;     text-align: center; }  ul li a{     z-index: 100; } 

the swipe event handlers:

$("li a").on("swiperight",function(){     $(this).parents("li").find(".leftfixed").show();     $(this).parents("li").find(".rightfixed").hide();     $(this).animate({"margin-left": "60px", "margin-right": "0px"}, 200); }); $("li a").on("swipeleft",function(){     $(this).parents("li").find(".leftfixed").hide();     $(this).parents("li").find(".rightfixed").show();     $(this).animate({"margin-right": "60px", "margin-left": "0px"}, 200); });