Jquery Mobile slide list

I'm trying to do a list with jQueryMobile like in the twitter application.

Video of what I'm looking for: http://www.youtube.com/watch?v=l7gTNpPTChM

But I have 2 problems:

1) Each row has a class .mailRow and the .live("tap") event works but .live("swipe") doesn't work on the mobile and does work on the computer when I do it with the right button.

2) I managed to "hide" the row with

    $('.mailRow').live('swipe', function(e){
        $(this).animate({ marginLeft: "100%"} , 800);
    });

But I don't know how to put another div underneath so it'll be visible when the animation ends.

This is how the list elements looks like in HTML:

    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
        <div id="12345" class="mailRow" style="margin-left: 100%; ">
            <div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                <a href="" class="ui-link-inherit">
                    <p class="ui-li-aside ui-li-desc"><strong>30/09开发者_开发技巧/2011 11:09:34</strong></p>              
                    <h3 class="ui-li-heading">USER1</h3>
                    <p class="ui-li-desc"><strong>Re: this is a test</strong></p>
                    <p class="ui-li-desc">TESTING THE MOBILE VERSION...</p>
                </a>
            </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div>
        </div>
    </li>

UPDATE : I found that the swipe event is not working becase there's an "a" tag inside the div. I don't know how to fix that.

Well I found the solution myself, and I would like to share it, just in case somebody will face the same problem:

New Style added:

<style type="text/css">
    .hidden
    {
        visibility: hidden;
        height: 0px !important;
        padding: 0px !important;
        margin: 0px !important;
    }
</style>

List elements HTML:

<li data-theme="c" mail-id="12345" class="mailRow">
    <div class="buttonsRow hidden">
        <a href="#" data-role="button" data-iconpos="top" data-icon="back" data-inline="true">Reply</a>
        <a href="#" data-role="button" data-iconpos="top" data-icon="delete" data-inline="true">Delete</a>
    </div>
    <a href="#" class="messageRow">
        <p data-role="desc" class="ui-li-aside"><strong>30/09/2011 11:09:34</strong></p>                
        <h3 data-role="heading">USER1</h3>
        <p data-role="desc" ><strong>Re: this is a test/strong></p>
        <p data-role="desc" >TESTING THE MOBILE VERSION...</p>
    </a>
</li>

Javascript code:

function mailLinks()
{
    $('.mailRow').live('swiperight', function(e){
        $(this).find('.messageRow').animate({ marginLeft: "100%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-r").addClass("ui-icon-arrow-l").removeClass("ui-icon-arrow-r");
            $(this).parent().find('.buttonsRow').removeClass("hidden");
            $(this).addClass("hidden");

        });
    });
    $('.mailRow').live('swipeleft', function(e){
        $(this).find('.buttonsRow').addClass("hidden");
        $(this).find('.messageRow').removeClass("hidden");
        $(this).find('.messageRow').animate({ marginLeft: "0%"} , 800, function(){
            $(this).parentsUntil('li').find(".ui-icon-arrow-l").addClass("ui-icon-arrow-r").removeClass("ui-icon-arrow-l");
        });
    });

    $('.mailRow').live('tap', function(e){
        e.preventDefault();
        idMail = $(this).attr('mail-id');
        loadPage('read');
    });
}

It's not pretty, but it does work.

don't know if it's important currently, but after jquery mobile 1.0 final was released,

there is a tutorial which describes your "swipe menu".

http://andymatthews.net/read/2011/02/23/Add-a-Twitter-for-iPhone-Style-Swipe-Menu-to-jQuery-Mobile