tags:

views:

137

answers:

1

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);              
  });