[jQuery] jumpy navigation slides (possibly due to hide, animation order)

[pedalpete]

I've spent the last few days creating a mobile/iphone optimized
version of my site.

I looked at jqTouch & iUI, but I thought it would mean a bunch of
configuring of new pages, and I wanted to just be able to use my own
API and a bunch of code I had already written in order to accomplish
this.

It actually came together rather well, and i've got something very
similar to native UI (sliding left/right on selections, scrolling,
etc).

On the iPhone, the animations run smooth (i'm using css transitions),
but the content hides, then slides, even though the .hide() is far
down the page from the slide.

I think it would look much better if it slid first and then hid.
However, the difference is that the bits that hide, and the bits that
slide, are not the same div, so I can't just chain them.

If you want to check out a url, go to
http://zifimusic.com/v2/mobile

Here's the animation code i'm using (note the actually transitions are
in the css, but are triggered with the addClass

[code]
 $('li.show').livequery('click', function(){

        var targetOffset=$(window).scrollTop();

         $('a.back').click(function(){
    $('li.selectedShow').remove();
    $('div#selectedShow').hide();
    $('div#holdForecast').show();
    window.scroll(0,targetOffset);
    $('div#header').addClass('holdForecastBack').removeClass
('holdForecastMove');
    });


    var showid=$(this).attr('id');
    $('div#header').addClass('holdForecastMove');

        var getShowid=$(this).attr('id');
        var selectedShow=$(this).html();
      var artist=$('span.artist',this).text();
        var htmlThis = '<li class="show" id="'+showid+'">'+selectedShow
+'<div id="media"></div><span class="holdMap"></span><\/li>';
        $('div#selectedShow').append(htmlThis).show();
                $('div#selectedShow li.show').addClass
('selectedShow').removeClass('show');

        $('div#holdForecast').hide();

[/code]

thanks,
pete