I use jQTouch (and its built-in animations) when developing the iPhone version on the website. So I have a static menu:
<ul class="rounded">
<li class="arrow"><a href="#item1" class="fade">Item 1</a></li>
<li class="arrow"><a href="#item2" class="fade">Item 2</a></li>
<li class="arrow"><a href="#item3" class="fade">Item 3</a></li>
<li class="arrow"><a href="#item4" class="fade">Item 4</a></li>
</ul>
which is included in some div. My problem is to hide the element that has the hash link, the same as id divit belongs, and the same as location.hashwhen the user is on such a page.
So, the event clickby reference (which moves the user to another one divwith the animation) is not suitable, because it location.hashchanges only after the animation is completed.
What is the question: how can I catch jQTouch animation completion to solve the problem? Maybe I can do it with jQuery, but how?
Thank.
EDIT:
. , .
$('body > div').bind('pageAnimationEnd', function(){
setTimeout(function(){
divId = '#' + $('.current .toolbar + .section').parent().attr('id');
link = $(divId + ' .rounded li').find('a[href='+divId+']');
if ( divId == location.hash
&& link.length > 0 )
{
$('a[href='+divId+']').parent().fadeOut(0);
}
else
{
$('a[href='+divId+']').parent().fadeIn(0);
}
}, 100);
});