I've been working on an iphone version of my site, and though their are lots of comments re: animation on mobile safari, I actually don't think it's all that bad (maybe it was previous versions, I'm on v.2).
I have an iphone like UI working fairly well, where the user can select something and the screen shifts left, and then shows the selection. Back and forth work ok, except that for some reason before it goes shifts left, it scrolls to the top of the screen. I'm not sure why this is happening. a demo is at http://zifimusic.com/v2/mobile what the code does is 1) animate the list left -330px (off the screen) 2) add the appropriate content to a div (which was offscreen is now onscreen) called div#selectedshow 3) scroll to the top of div#selectedShow so that the selected item is always at the top of the screen 4) click the x (it will be a back button eventually) to reverse this process the code is [code] $('div#holdForecast').animate({marginLeft : "-330px"},1000) var getShowid=$(this).attr('id'); var selectedShow=$(this).html(); var htmlThis = '<li class="show">'+selectedShow+'<span class="holdMap"></span><\/li>'; $('div#selectedShow').html(htmlThis).show().css ({"position":"absolute", "top": topVal}); $('div#selectedShow li.show').addClass ('selectedShow').removeClass('show'); var targetOffset=$('li.selectedShow').offset().top; targetOffset=targetOffset-14; $('html,body').animate({scrollTop: targetOffset},5); var topMenu='<div id="topmenu"><a class="back"><?php echo $closeImg; ?><\/a><\/div>'; $('li.selectedShow').prepend(topMenu); [/code] I don't see anything in there that says (scroll to the top), and yet it seems to do that. Is there a better animation sequence I should be using? Should I chain these better than I have? Thanks Pete