Hi, all!
I use jQTouch (and its built-in animations) in developing iPhone version of a 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>
that's included in some div
's. My problem is to hide the item that has link with hash same as the id
of the div
, it belongs to, and same as the location.hash
, when the user is on such a page.
So, click
event on a link (which moves user to another div
with animation) isn't appropriate because the location.hash
changes only when the animation completes.
That's the question: How can I catch the jQTouch animation completion to solve the problem? Maybe I can do it with jQuery itself, but how?
Thanks.
EDIT: I've found the solution. So, I post it here.
$('body > div').bind('pageAnimationEnd', function(){
//wait a bit for the end of the animation
//and hash change
setTimeout(function(){
//current div id
divId = '#' + $('.current .toolbar + .section').parent().attr('id');
//test whether there's a link to the same page
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);
});