Creating a smooth swipe behavior using jQueryMobile which reveals a div

Question

What im trying to do is to reveal some content while sliding to the right/left. im currently basing my behavior on the simple event "on swipeleft" but that doesn't give me what i intended to.

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

I want that while doing swipe, the content of the li itself would move to the left and while that is happening a fixed div will be revealed. I hope anyone could suggest me the right way doing this because currentnly, the alert i'm showing, appears only after i finish the swipe and not while i'm doing it.

Answer 1

You could absolutely position the hidden divs at right and left, and then on swipe animate the left/right margins to reveal the 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);
});